<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博沃智慧 - 智能助手</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <script src="./static/vendor/js/chart-4.5.0.js"></script>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }
        
        /* 折叠状态下的图标样式 */
        .sidebar-collapsed .fade-text {
            opacity: 0;
            pointer-events: none;
        }
        
        /* 折叠按钮图标过渡 */
        #sidebarToggle i {
            transition: transform 0.3s ease;
        }
        
        .sidebar-collapsed #sidebarToggle i {
            transform: rotate(180deg);
        }
        
        /* 折叠状态下的用户区域样式 */
        .sidebar-collapsed .user-avatar {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            display: block;
        }
        
        .sidebar-collapsed .user-actions {
            opacity: 1;
            pointer-events: auto;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .sidebar-collapsed .user-actions button {
            width: 36px;
            height: 36px;
            padding: 8px;
        }
        
        /* 折叠状态下的用户信息区域 */
        .sidebar-collapsed .user-info {
            text-align: center;
            padding: 10px;
        }
        
        /* 悬停提示 */
        .tooltip {
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            background: #1f2937;
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            margin-left: 10px;
            z-index: 1000;
        }
        
        .tooltip::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-right-color: #1f2937;
        }
        
        .has-tooltip:hover .tooltip {
            opacity: 1;
        }
        
        /* 折叠状态下的悬停提示调整 */
        .sidebar-collapsed .tooltip {
            margin-left: 5px;
        }
        
        /* 设置按钮动画效果 */
        .settings-btn {
            position: relative;
            overflow: hidden;
        }
        
        .settings-btn:hover .settings-icon {
            animation: rotate 1s linear infinite;
            color: #6366f1;
        }
        
        .settings-btn:active {
            transform: scale(0.95);
        }
        
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        /* 设置按钮脉冲效果 */
        .settings-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(99, 102, 241, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
        }
        
        /* 时间戳样式 */
        .timestamp {
            font-size: 11px;
            color: #64748b;
            margin-top: 4px;
        }
        
        .user-timestamp {
            text-align: right;
        }
        
        /* 任务详情展示样式 */
        .task-details {
            margin-top: 12px;
            padding: 12px;
            background: #f8fafc;
            border-radius: 8px;
            border-left: 3px solid #e2e8f0;
            font-size: 12px;
            line-height: 1.5;
            color: #475569;
            display: none;
        }
        
        .task-details.show {
            display: block;
            animation: slideDown 0.3s ease-out;
        }
        
        .task-details h4 {
            font-weight: 600;
            margin-bottom: 8px;
            color: #334155;
        }
        
        .task-details ul {
            margin: 0;
            padding-left: 16px;
        }
        
        .task-details li {
            margin-bottom: 4px;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 选中任务样式 */
        .todo-item.selected {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        
        .todo-item.selected .task-details {
            border-left-color: #6366f1;
        }
        
        /* 开关按钮样式 */
        .toggle-switch {
            appearance: none;
            width: 44px;
            height: 24px;
            background: #e5e7eb;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .toggle-switch:checked {
            background: #6366f1;
        }
        
        .toggle-switch::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            top: 2px;
            left: 2px;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .toggle-switch:checked::before {
            transform: translateX(20px);
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 处理节点动画 */
        .processing-node {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        /* 已完成任务的可点击效果 */
        .processing-node[data-step] .text-xs.font-medium.text-green-600 {
            cursor: pointer;
        }
        
        .processing-node[data-step]:hover .text-xs.font-medium.text-green-600 {
            color: #059669;
            text-decoration: underline;
        }
        
        /* 为已完成的任务添加点击提示 */
        .processing-node.completed-task {
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .processing-node.completed-task:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
        }
        
        .processing-node.completed-task .click-hint {
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }
        
        .processing-node.completed-task:hover .click-hint {
            opacity: 1;
        }
        
        /* 已完成任务的光晕效果 */
        .processing-node.completed-task {
            border-left: 3px solid #10b981 !important;
        }
        
        .processing-node.completed-task::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.1) 100%);
            border-radius: 8px;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        
        .processing-node.completed-task:hover::before {
            opacity: 1;
        }
        .processing-node::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }
        .processing-node:hover::before {
            left: 100%;
        }
        .processing-node:hover {
            transform: translateX(8px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        .processing-node.active {
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        /* 结果面板 */
        .result-panel {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .result-panel:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.1);
        }
        .result-panel.active {
            border-color: #10b981;
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
            transform: translateY(-2px);
        }

        /* 聊天消息动画 */
        .chat-message {
            animation: messageSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes messageSlideIn {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Todo项动画 */
        .todo-item {
            animation: todoFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes todoFadeIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 语音输入动画 */
        .voice-recording {
            animation: voicePulse 1.5s ease-in-out infinite;
        }
        @keyframes voicePulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }
        }

        /* 附件按钮 */
        .attachment-btn {
            transition: all 0.2s ease;
            position: relative;
        }
        .attachment-btn:hover {
            transform: translateY(-2px);
        }
        .attachment-btn::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #1f2937;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .attachment-btn:hover::after {
            opacity: 1;
        }

        /* 加载动画 */
        .loading-dots {
            display: inline-flex;
            gap: 4px;
        }
        .loading-dots span {
            width: 8px;
            height: 8px;
            background: #667eea;
            border-radius: 50%;
            animation: loadingBounce 1.4s ease-in-out infinite both;
        }
        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes loadingBounce {
            0%, 80%, 100% {
                transform: scale(0);
            }
            40% {
                transform: scale(1);
            }
        }

        @keyframes taskComplete {
            0% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
            }
        }

        /* 任务状态转换动画 */
        .status-transition {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 进度条动画 */
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }

        /* 结果面板出现动画 */
        .result-panel {
            animation: slideInUp 0.5s ease-out;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 玻璃态效果 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* 进度条 */
        .progress-bar {
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        /* 打字机效果 */
        .typewriter {
            overflow: hidden;
            white-space: pre-wrap;
            animation: typing 2s steps(40, end);
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        /* Robot选择器 */
        .robot-selector {
            transition: all 0.3s ease;
        }
        .robot-selector:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        /* 反馈按钮 */
        .feedback-btn {
            transition: all 0.2s ease;
        }
        .feedback-btn:hover {
            transform: scale(1.1);
        }
        .feedback-btn.active {
            color: #667eea;
        }

        /* 搜索框 */
        .search-box {
            transition: all 0.3s ease;
        }
        .search-box:focus-within {
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        /* 文件上传区域 */
        .upload-area {
            border: 2px dashed #d1d5db;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }
        .upload-area.dragover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        /* 对话历史项 */
        .conversation-item {
            transition: all 0.3s ease;
        }
        .conversation-item:hover {
            transform: translateX(4px);
        }

        /* 分页控件 */
        .pagination-btn {
            transition: all 0.2s ease;
        }
        .pagination-btn:hover {
            background: #667eea;
            color: white;
        }

        /* 代码高亮 */
        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
        }
        .code-block pre {
            margin: 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-brain text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">博沃智慧</h1>
                            <p class="text-xs text-slate-500">智能助手</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            
            <!-- Robot选择器 -->
            <div class="p-4 border-b border-slate-200">
                <div class="mb-3">
                    <!-- <label class="block text-sm font-medium text-slate-700 mb-2 fade-text">选择Robot</label> -->
                    <select id="robotSelector" class="w-full p-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                        <option value="robot1">机器人1</option>
                        <option value="robot2">机器人2</option>
                        <option value="tech-docs">技术文档库问答</option>
                        <option value="work-docs">工作资料库问答</option>
                        <option value="study-docs">学习资料库问答</option>
                    </select>
                </div>
            </div>

            <!-- 对话记录 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar has-tooltip">
                <div class="p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="fade-text font-semibold text-slate-700">对话历史</h3>
                        <button id="newConversationBtn" class="fade-text p-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition-colors">
                            <i class="fas fa-plus text-sm"></i>
                        </button>
                    </div>
                <!-- <div class="tooltip">对话历史记录</div> -->

                    <!-- 搜索框 -->
                    <div class="search-box mb-4 fade-text">
                        <div class="relative">
                            <input id="conversationSearch" type="text" placeholder="搜索对话历史..." class="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <!-- 知识问答示例 -->
                        <div class="conversation-item group relative p-4 rounded-xl bg-slate-50 hover:bg-slate-100 cursor-pointer transition-all duration-200" data-type="knowledge">
                            <div class="flex items-start justify-between">
                                <div class="fade-text flex-1">
                                    <div class="flex items-center space-x-2 mb-1">
                                        <i class="fas fa-book-open text-blue-500 text-sm"></i>
                                        <p class="font-medium text-slate-800 text-sm">深圳监测站分析方法</p>
                                    </div>
                                    <p class="text-xs text-slate-500">今天 15:20</p>
                                </div>
                                <div class="fade-text flex space-x-1">
                                    <button class="p-1 rounded hover:bg-red-100 text-red-500 transition-all opacity-0 group-hover:opacity-100" title="删除对话记录">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                    <button class="download-btn p-1 rounded hover:bg-blue-100 text-blue-500 transition-all opacity-0 group-hover:opacity-100" data-conversation="knowledge" title="下载对话记录">
                                        <i class="fas fa-download text-xs"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 数据问答示例 -->
                        <div class="conversation-item group relative p-4 rounded-xl bg-slate-50 hover:bg-slate-100 cursor-pointer transition-all duration-200" data-type="data">
                            <div class="flex items-start justify-between">
                                <div class="fade-text flex-1">
                                    <div class="flex items-center space-x-2 mb-1">
                                        <i class="fas fa-chart-line text-indigo-500 text-sm"></i>
                                        <p class="font-medium text-slate-800 text-sm">深圳AQI趋势分析</p>
                                    </div>
                                    <p class="text-xs text-slate-500">今天 14:30</p>
                                </div>
                                <div class="fade-text flex space-x-1">
                                    <button class="p-1 rounded hover:bg-red-100 text-red-500 transition-all opacity-0 group-hover:opacity-100" title="删除对话记录">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                    <button class="download-btn p-1 rounded hover:bg-blue-100 text-blue-500 transition-all opacity-0 group-hover:opacity-100" data-conversation="data" title="下载对话记录">
                                        <i class="fas fa-download text-xs"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 图片问答示例 -->
                        <div class="conversation-item group relative p-4 rounded-xl bg-slate-50 hover:bg-slate-100 cursor-pointer transition-all duration-200" data-type="image">
                            <div class="flex items-start justify-between">
                                <div class="fade-text flex-1">
                                    <div class="flex items-center space-x-2 mb-1">
                                        <i class="fas fa-image text-green-500 text-sm"></i>
                                        <p class="font-medium text-slate-800 text-sm">空气质量图表解读</p>
                                    </div>
                                    <p class="text-xs text-slate-500">今天 10:15</p>
                                </div>
                                <div class="fade-text flex space-x-1">
                                    <button class="p-1 rounded hover:bg-red-100 text-red-500 transition-all opacity-0 group-hover:opacity-100" title="删除对话记录">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                    <button class="download-btn p-1 rounded hover:bg-blue-100 text-blue-500 transition-all opacity-0 group-hover:opacity-100" data-conversation="image" title="下载对话记录">
                                        <i class="fas fa-download text-xs"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 代码问答示例 -->
                        <div class="conversation-item group relative p-4 rounded-xl bg-slate-50 hover:bg-slate-100 cursor-pointer transition-all duration-200" data-type="code">
                            <div class="flex items-start justify-between">
                                <div class="fade-text flex-1">
                                    <div class="flex items-center space-x-2 mb-1">
                                        <i class="fas fa-code text-purple-500 text-sm"></i>
                                        <p class="font-medium text-slate-800 text-sm">代码审查优化</p>
                                    </div>
                                    <p class="text-xs text-slate-500">昨天 16:45</p>
                                </div>
                                <div class="fade-text flex space-x-1">
                                    <button class="p-1 rounded hover:bg-red-100 text-red-500 transition-all opacity-0 group-hover:opacity-100" title="删除对话记录">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                    <button class="download-btn p-1 rounded hover:bg-blue-100 text-blue-500 transition-all opacity-0 group-hover:opacity-100" data-conversation="code" title="下载对话记录">
                                        <i class="fas fa-download text-xs"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200 has-tooltip">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg user-avatar">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">张晓明</p>
                        <p class="text-xs text-slate-500">专业版用户</p>
                    </div>
                    <div class="fade-text flex space-x-1 user-actions">
                        <button id="userDetailBtn" class="p-2 rounded-lg hover:bg-slate-100 transition-colors" title="用户详情">
                            <i class="fas fa-user-circle text-slate-600"></i>
                        </button>
                        <button id="settingsBtn" class="p-2 rounded-lg hover:bg-slate-100 transition-all duration-300 settings-btn" title="系统设置">
                            <i class="fas fa-cog text-slate-600 settings-icon"></i>
                        </button>
                    </div>
                </div>
                <div class="tooltip">用户信息</div>
            </div>
        </div>

        <!-- 中间问答界面 -->
        <div class="flex-1 flex flex-col bg-white" style="width: 40%;">
            <!-- 聊天区域 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6" id="chatArea">
                <!-- 动态内容将在这里显示 -->
            </div>

            <!-- 输入区域 -->
            <div class="border-t border-slate-200 p-4 bg-white">
                <div class="flex items-end space-x-3">
                    <div class="flex-1">
                        <textarea 
                            id="userInput"
                            class="w-full p-4 border-2 border-slate-200 rounded-xl resize-none focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-50 transition-all"
                            placeholder="输入您的问题..."
                            rows="1"
                        ></textarea>

                        <!-- 附件选项 -->
                        <div class="flex items-center justify-between mt-3">
                            <div class="flex items-center space-x-2">
                                <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="上传图片" id="uploadImage">
                                    <i class="fas fa-image text-slate-600"></i>
                                </button>
                                <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="上传文件" id="uploadFile">
                                    <i class="fas fa-file text-slate-600"></i>
                                </button>
                                <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="代码片段" id="insertCode">
                                    <i class="fas fa-code text-slate-600"></i>
                                </button>
                                <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="MCP工具" id="mcpTools">
                                    <i class="fas fa-plug text-slate-600"></i>
                                </button>
                                <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="智能代理" id="selectAgent">
                                    <i class="fas fa-microchip text-slate-600"></i>
                                </button>
                                <div class="w-px h-6 bg-slate-300 mx-2"></div>
                                <button id="voiceBtn" class="attachment-btn p-2 rounded-lg hover:bg-red-100 transition-all" data-tooltip="语音输入">
                                    <i class="fas fa-microphone text-slate-600"></i>
                                </button>
                            </div>

                            <div class="flex items-center space-x-2">
                                <span class="text-xs text-slate-400">按 Enter 发送</span>
                                <button id="sendBtn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-3 rounded-xl hover:from-indigo-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧结果面板 -->
        <div class="bg-slate-50 border-l border-slate-200 flex flex-col" style="width: 45%;">
            <!-- 标题栏 -->
            <div class="bg-white border-b border-slate-200 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="font-bold text-slate-800 text-lg">回答详情</h2>
                        <p class="text-sm text-slate-500">展示模型处理过程和输出结果</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    </div>
                </div>
            </div>

            <!-- 结果内容 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4" id="resultArea">
                <!-- 动态内容将在这里显示 -->
            </div>
        </div>
    </div>

    <!-- 文件上传对话框 -->
    <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-96 max-w-md">
            <h3 class="text-lg font-semibold mb-4">上传文件</h3>
            <div class="upload-area p-8 rounded-lg text-center mb-4">
                <i class="fas fa-cloud-upload-alt text-4xl text-slate-400 mb-2"></i>
                <p class="text-slate-600">拖拽文件到此处或点击选择</p>
                <input type="file" id="fileInput" class="hidden" multiple>
            </div>
            <div class="flex justify-end space-x-2">
                <button id="cancelUpload" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button id="confirmUpload" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">上传</button>
            </div>
        </div>
    </div>

    <!-- 代码输入对话框 -->
    <div id="codeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-2/3 max-w-4xl">
            <h3 class="text-lg font-semibold mb-4">插入代码片段</h3>
            <textarea id="codeInput" class="w-full h-64 p-4 border border-slate-300 rounded-lg font-mono text-sm" placeholder="请输入代码..."></textarea>
            <div class="flex justify-end space-x-2 mt-4">
                <button id="cancelCode" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button id="confirmCode" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">插入</button>
            </div>
        </div>
    </div>

    <!-- MCP工具选择对话框 -->
    <div id="mcpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-96 max-w-md">
            <h3 class="text-lg font-semibold mb-4">选择MCP工具</h3>
            <div class="space-y-2 max-h-64 overflow-y-auto">
                <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 rounded">
                    <input type="checkbox" class="form-checkbox text-indigo-600">
                    <span class="text-sm">数据库查询工具</span>
                </label>
                <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 rounded">
                    <input type="checkbox" class="form-checkbox text-indigo-600">
                    <span class="text-sm">图像分析工具</span>
                </label>
                <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 rounded">
                    <input type="checkbox" class="form-checkbox text-indigo-600">
                    <span class="text-sm">文档处理工具</span>
                </label>
            </div>
            <div class="flex justify-end space-x-2 mt-4">
                <button id="cancelMcp" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button id="confirmMcp" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">确认</button>
            </div>
        </div>
    </div>

    <!-- Agent选择对话框 -->
    <div id="agentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-96 max-w-md">
            <h3 class="text-lg font-semibold mb-4">选择智能代理</h3>
            <div class="space-y-2">
                <div class="p-3 border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50">
                    <div class="font-medium">数据分析专家</div>
                    <div class="text-xs text-slate-500">擅长数据分析和可视化</div>
                </div>
                <div class="p-3 border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50">
                    <div class="font-medium">知识库专家</div>
                    <div class="text-xs text-slate-500">擅长知识检索和问答</div>
                </div>
                <div class="p-3 border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50">
                    <div class="font-medium">编程助手</div>
                    <div class="text-xs text-slate-500">擅长代码审查和优化</div>
                </div>
            </div>
            <div class="flex justify-end space-x-2 mt-4">
                <button id="cancelAgent" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button id="confirmAgent" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">确认</button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentConversation = null;
        let isRecording = false;
        let currentFiles = [];
        let currentCode = '';
        let selectedMcpTools = [];
        let selectedAgent = null;

        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
            
            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');
            
            // 更新图标
            const icon = sidebarToggle.querySelector('i');
            if (sidebar.classList.contains('sidebar-collapsed')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-chevron-right');
            } else {
                icon.classList.remove('fa-chevron-right');
                icon.classList.add('fa-bars');
            }
            
            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 初始化基本事件监听器（页面加载时调用）
        function initializeBasicEventListeners() {
            console.log('正在初始化基本事件监听器...');
            
            // 新建对话功能
            const newConversationBtn = document.getElementById('newConversationBtn');
            if (newConversationBtn) {
                newConversationBtn.addEventListener('click', () => {
                    const chatArea = document.getElementById('chatArea');
                    const resultArea = document.getElementById('resultArea');
                    
                    chatArea.innerHTML = '';
                    resultArea.innerHTML = '';
                    
                    // 清空当前对话状态
                    currentConversation = null;
                    
                    // 显示提示消息
                    const welcomeMessage = `
                        <div class="text-center py-12">
                            <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-comments text-white text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-slate-800 mb-2">开始新的对话</h3>
                            <p class="text-slate-600">请输入您的问题，我将为您提供专业的回答</p>
                        </div>
                    `;
                    chatArea.innerHTML = welcomeMessage;
                    
                    // 移除所有对话历史项的高亮状态
                    document.querySelectorAll('.conversation-item').forEach(item => {
                        item.classList.remove('bg-indigo-50', 'border-l-4', 'border-indigo-500');
                    });
                });
            }

            // 对话历史搜索功能
            const conversationSearch = document.getElementById('conversationSearch');
            if (conversationSearch) {
                conversationSearch.addEventListener('input', (e) => {
                    const searchTerm = e.target.value.toLowerCase();
                    const conversationItems = document.querySelectorAll('.conversation-item');
                    
                    conversationItems.forEach(item => {
                        const titleElement = item.querySelector('p');
                        if (titleElement) {
                            const title = titleElement.textContent.toLowerCase();
                            const content = item.textContent.toLowerCase();
                            
                            if (title.includes(searchTerm) || content.includes(searchTerm)) {
                                item.style.display = 'block';
                            } else {
                                item.style.display = 'none';
                            }
                        }
                    });
                });
            }

            // 用户详情按钮功能
            const userDetailBtn = document.getElementById('userDetailBtn');
            if (userDetailBtn) {
                userDetailBtn.addEventListener('click', () => {
                    const userModal = document.createElement('div');
                    userModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
                    userModal.innerHTML = `
                        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-semibold text-slate-800">用户详情</h3>
                                <button class="close-modal text-slate-400 hover:text-slate-600">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="space-y-4">
                                <div class="flex items-center space-x-4">
                                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
                                        <i class="fas fa-user text-white text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-slate-800">张晓明</p>
                                        <p class="text-sm text-slate-500">专业版用户</p>
                                    </div>
                                </div>
                                <div class="border-t pt-4">
                                    <div class="grid grid-cols-2 gap-4 text-sm">
                                        <div>
                                            <p class="text-slate-500">注册时间</p>
                                            <p class="font-medium">2024-01-15</p>
                                        </div>
                                        <div>
                                            <p class="text-slate-500">最后登录</p>
                                            <p class="font-medium">2024-12-26</p>
                                        </div>
                                        <div>
                                            <p class="text-slate-500">对话次数</p>
                                            <p class="font-medium">1,234</p>
                                        </div>
                                        <div>
                                            <p class="text-slate-500">使用时长</p>
                                            <p class="font-medium">156小时</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    document.body.appendChild(userModal);
                    
                    // 关闭弹窗
                    userModal.addEventListener('click', (e) => {
                        if (e.target === userModal || e.target.classList.contains('close-modal')) {
                            document.body.removeChild(userModal);
                        }
                    });
                });
            }

            // 设置按钮功能
            const settingsBtn = document.getElementById('settingsBtn');
            if (settingsBtn) {
                settingsBtn.addEventListener('click', () => {
                    // 添加点击反馈动画
                    settingsBtn.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        settingsBtn.style.transform = 'scale(1)';
                    }, 150);
                    
                    // 跳转到设置页面
                    setTimeout(() => {
                        window.location.href = 'settings.html';
                    }, 200);
                });
            }
            
            console.log('基本事件监听器初始化完成');
        }

        // 页面加载完成后初始化
        function initializePage() {
            initializeBasicEventListeners();
            
            const firstConversationItem = document.querySelector('.conversation-item');
            if (firstConversationItem) {
                firstConversationItem.classList.add('bg-blue-50', 'border-l-4', 'border-blue-500');
                loadConversation('knowledge');
            }
        }

        // 立即初始化，不等待DOMContentLoaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializePage);
        } else {
            initializePage();
        }

  
    
        // 加载不同类型的对话
        function loadConversation(type) {
            const chatArea = document.getElementById('chatArea');
            const resultArea = document.getElementById('resultArea');
            
            chatArea.innerHTML = '';
            resultArea.innerHTML = '';
            
            switch(type) {
                case 'knowledge':
                    loadKnowledgeConversation();
                    break;
                case 'data':
                    loadDataConversation();
                    break;
                case 'image':
                    loadImageConversation();
                    break;
                case 'code':
                    loadCodeConversation();
                    break;
            }
            
            // 重新初始化事件监听器以确保新加载的内容正常工作
            setTimeout(() => {
                initializeEventListeners();
                setupProcessingNodes();
            }, 500);
        }

        // 知识问答对话
        function loadKnowledgeConversation() {
            const chatArea = document.getElementById('chatArea');
            const resultArea = document.getElementById('resultArea');
            
            const userMessage = `
                <div class="chat-message flex justify-end">
                    <div class="flex items-start space-x-3 max-w-[80%]">
                        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-br-sm p-4 shadow-lg">
                            <p class="text-white text-sm leading-relaxed">深圳监测站有哪些分析方法可以分析地表水中铜？</p>
                            <div class="timestamp user-timestamp text-blue-200">2025-08-27 11:34:13</div>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                    </div>
                </div>
            `;
            
            const aiResponse = `
                <div class="chat-message flex justify-start">
                    <div class="flex items-start space-x-3 max-w-[90%]">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-robot text-white text-sm"></i>
                        </div>
                        <div class="glass-effect rounded-2xl p-6 shadow-xl border border-slate-200">
                            <div class="mb-4">
                                <p class="text-slate-700 text-sm leading-relaxed mb-3">
                                    我正在处理您的问题："深圳监测站有哪些分析方法可以分析地表水中铜？"
                                </p>
                                <div class="timestamp">${new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</div>
                            </div>
                            
                            <!-- 进度条 -->
                            <div class="mb-6">
                                <div class="flex justify-between text-xs text-slate-500 mb-2">
                                    <span>处理进度</span>
                                    <span id="progressText">0%</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div id="progressBar" class="progress-bar" style="width: 0%"></div>
                                </div>
                            </div>
                            
                            <!-- Todo List -->
                            <div class="space-y-3">
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="1">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-search text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">1. 问题解析</p>
                                                <p class="text-xs text-slate-500 mt-1">分析用户问题意图</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>问题解析流程</h4>
                                        <ul>
                                            <li>✓ 识别问题领域：环境监测技术</li>
                                            <li>✓ 提取关键实体：深圳监测站、地表水、铜、分析方法</li>
                                            <li>✓ 确定查询目标：获取具体的铜分析方法列表</li>
                                            <li>✓ 分析查询深度：需要包括技术参数和标准依据</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="2">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-database text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">2. 知识检索</p>
                                                <p class="text-xs text-slate-500 mt-1">检索内部知识库</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>知识检索流程</h4>
                                        <ul>
                                            <li>✓ 搜索国家标准库：GB 3838-2002等水质标准</li>
                                            <li>✓ 检索行业规范：HJ系列环境监测标准</li>
                                            <li>✓ 查询技术文档：水和废水监测分析方法</li>
                                            <li>✓ 筛选相关方法：过滤出铜的专项分析方法</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-globe text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">3. 互联网搜索</p>
                                                <p class="text-xs text-slate-500 mt-1">搜索最新技术资料</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>互联网搜索流程</h4>
                                        <ul>
                                            <li>✓ 搜索学术文献：最新研究论文和技术报告</li>
                                            <li>✓ 查找官方发布：环保部门最新公告</li>
                                            <li>✓ 收集专家观点：行业专家技术文章</li>
                                            <li>✓ 整理最新进展：技术更新和应用案例</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="4">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-file-alt text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">4. 生成回复</p>
                                                <p class="text-xs text-slate-500 mt-1">整理并生成最终回复</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>生成回复流程</h4>
                                        <ul>
                                            <li>✓ 整合检索结果：汇总知识和网络搜索结果</li>
                                            <li>✓ 生成结构化回答：按检测原理分类整理</li>
                                            <li>✓ 添加引用标注：标注信息来源和出处</li>
                                            <li>✓ 完善回复内容：补充技术参数和应用场景</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            chatArea.innerHTML = userMessage + aiResponse;
            
            // 结果面板内容
            const results = `
                <!-- 问题解析结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="1" style="display: none;">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center mr-3">
                                <i class="fas fa-search text-green-600"></i>
                            </div>
                            问题解析完成
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">步骤 1</span>
                            <span class="text-xs text-slate-400">${new Date().toLocaleTimeString()}</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="bg-green-50 p-3 rounded-lg">
                            <h4 class="font-medium text-green-800 mb-2">解析结果</h4>
                            <div class="text-sm text-green-700 space-y-1">
                                <div>✓ 问题类型：环境监测专业知识查询</div>
                                <div>✓ 查询对象：深圳监测站铜分析方法</div>
                                <div>✓ 信息深度：需要详细技术参数和标准依据</div>
                                <div>✓ 输出格式：结构化方法列表</div>
                            </div>
                        </div>
                        <div class="bg-blue-50 p-3 rounded-lg">
                            <h4 class="font-medium text-blue-800 mb-2">关键实体识别</h4>
                            <div class="text-sm text-blue-700">
                                <div class="flex flex-wrap gap-2">
                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">深圳监测站</span>
                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">地表水</span>
                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">铜</span>
                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">分析方法</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 知识检索结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="2" style="display: none;">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fas fa-database text-blue-600"></i>
                            </div>
                            知识检索完成
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">步骤 2</span>
                            <span class="text-xs text-slate-400">${new Date().toLocaleTimeString()}</span>
                            <span class="text-xs text-blue-600 ml-2">找到 5 篇相关文档</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="border-l-4 border-blue-400 pl-4 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors" onclick="showDocument('GB_3838_2002')">
                            <h4 class="font-medium text-slate-800">《地表水环境质量标准》(GB 3838-2002)</h4>
                            <p class="text-sm text-slate-600 mt-1">规定了地表水中铜的监测方法和标准限值，检测限为0.005mg/L</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded">国家标准</span>
                                <span class="text-xs text-slate-500">相关度: 95%</span>
                                <i class="fas fa-external-link-alt text-blue-500 text-xs"></i>
                            </div>
                        </div>
                        <div class="border-l-4 border-blue-400 pl-4 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors" onclick="showDocument('HJ_700_2014')">
                            <h4 class="font-medium text-slate-800">《水质 65种元素的测定 电感耦合等离子体质谱法》(HJ 700-2014)</h4>
                            <p class="text-sm text-slate-600 mt-1">采用ICP-MS同时测定多种金属元素，铜的检测限为0.0001mg/L</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded">行业标准</span>
                                <span class="text-xs text-slate-500">相关度: 92%</span>
                                <i class="fas fa-external-link-alt text-blue-500 text-xs"></i>
                            </div>
                        </div>
                        <div class="border-l-4 border-blue-400 pl-4 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors" onclick="showDocument('GB_T_7475_1987')">
                            <h4 class="font-medium text-slate-800">《水质 铜、锌、铅、镉的测定 原子吸收分光光度法》(GB/T 7475-1987)</h4>
                            <p class="text-sm text-slate-600 mt-1">原子吸收分光光度法测定铜的标准方法，检测限为0.001mg/L</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded">国家标准</span>
                                <span class="text-xs text-slate-500">相关度: 90%</span>
                                <i class="fas fa-external-link-alt text-blue-500 text-xs"></i>
                            </div>
                        </div>
                        <div class="text-center mt-3">
                            <button class="text-xs text-blue-600 hover:text-blue-800" onclick="showMoreDocuments()">查看全部 5 篇文档 →</button>
                        </div>
                    </div>
                </div>
                
                <!-- 互联网搜索结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="3" style="display: none;">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-yellow-100 flex items-center justify-center mr-3">
                                <i class="fas fa-globe text-yellow-600"></i>
                            </div>
                            互联网搜索完成
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">步骤 3</span>
                            <span class="text-xs text-slate-400">${new Date().toLocaleTimeString()}</span>
                            <span class="text-xs text-yellow-600 ml-2">找到 8 篇相关文章</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="border-l-4 border-yellow-400 pl-4 cursor-pointer hover:bg-yellow-50 p-2 rounded transition-colors" onclick="showWebpage('article_1')">
                            <h4 class="font-medium text-slate-800">深圳环境监测站最新技术进展</h4>
                            <p class="text-sm text-slate-600 mt-1">介绍深圳监测站引进的ICP-MS设备及其在重金属检测中的应用...</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-yellow-600 bg-yellow-50 px-2 py-1 rounded">技术文章</span>
                                <span class="text-xs text-slate-500">深圳环保网</span>
                                <span class="text-xs text-slate-500">2024-01-15</span>
                                <i class="fas fa-external-link-alt text-yellow-500 text-xs"></i>
                            </div>
                        </div>
                        <div class="border-l-4 border-yellow-400 pl-4 cursor-pointer hover:bg-yellow-50 p-2 rounded transition-colors" onclick="showWebpage('article_2')">
                            <h4 class="font-medium text-slate-800">水中重金属检测技术最新研究进展</h4>
                            <p class="text-sm text-slate-600 mt-1">综述了包括原子吸收、ICP-MS、电化学法等铜检测技术的最新发展...</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-yellow-600 bg-yellow-50 px-2 py-1 rounded">学术论文</span>
                                <span class="text-xs text-slate-500">中国环境科学</span>
                                <span class="text-xs text-slate-500">2024-01-10</span>
                                <i class="fas fa-external-link-alt text-yellow-500 text-xs"></i>
                            </div>
                        </div>
                        <div class="border-l-4 border-yellow-400 pl-4 cursor-pointer hover:bg-yellow-50 p-2 rounded transition-colors" onclick="showWebpage('article_3')">
                            <h4 class="font-medium text-slate-800">深圳水质监测网络建设成果展示</h4>
                            <p class="text-sm text-slate-600 mt-1">详细介绍深圳监测站的水质监测网络建设，包括各站点分布和检测能力...</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-yellow-600 bg-yellow-50 px-2 py-1 rounded">政府报告</span>
                                <span class="text-xs text-slate-500">深圳市生态环境局</span>
                                <span class="text-xs text-slate-500">2024-01-08</span>
                                <i class="fas fa-external-link-alt text-yellow-500 text-xs"></i>
                            </div>
                        </div>
                        <div class="text-center mt-3">
                            <button class="text-xs text-yellow-600 hover:text-yellow-800" onclick="showMoreWebpages()">查看全部 8 篇文章 →</button>
                        </div>
                    </div>
                </div>
                
                <!-- 生成回复结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="4" style="display: none;">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                                <i class="fas fa-graduation-cap text-purple-600"></i>
                            </div>
                            深圳监测站地表水中铜分析方法汇总
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">最终答案</span>
                            <div class="flex space-x-2">
                                <button class="feedback-btn text-slate-400 hover:text-green-500" onclick="toggleFeedback(this, 'like')">
                                    <i class="fas fa-thumbs-up"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-red-500" onclick="toggleFeedback(this, 'dislike')">
                                    <i class="fas fa-thumbs-down"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-blue-500" onclick="showFeedbackDialog()">
                                    <i class="fas fa-comment"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-6">
                        <!-- 概述 -->
                        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-5 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-3 flex items-center">
                                <i class="fas fa-info-circle mr-2"></i>
                                分析方法概述
                            </h4>
                            <p class="text-sm text-blue-700 leading-relaxed">
                                深圳监测站分析地表水中铜主要采用国家标准方法，包括原子吸收分光光度法、电感耦合等离子体质谱法等。这些方法具有高灵敏度、高准确度的特点，能够满足《地表水环境质量标准》(GB 3838-2002)中对铜的检测要求。
                            </p>
                        </div>
                        
                        <!-- 主要分析方法 -->
                        <div>
                            <h4 class="font-semibold text-slate-800 mb-4">主要分析方法</h4>
                            <div class="space-y-4">
                                <div class="border-l-4 border-green-400 pl-4">
                                    <h5 class="font-medium text-slate-800">1. 原子吸收分光光度法 (AAS)</h5>
                                    <div class="mt-2 text-sm text-slate-600 space-y-1">
                                        <p><strong>检测原理：</strong>利用铜原子在特定波长下的吸收特性进行定量分析</p>
                                        <p><strong>检测限：</strong>0.001 mg/L</p>
                                        <p><strong>适用范围：</strong>地表水、地下水、饮用水</p>
                                        <p><strong>标准依据：</strong>GB/T 7475-1987</p>
                                    </div>
                                </div>
                                
                                <div class="border-l-4 border-blue-400 pl-4">
                                    <h5 class="font-medium text-slate-800">2. 电感耦合等离子体质谱法 (ICP-MS)</h5>
                                    <div class="mt-2 text-sm text-slate-600 space-y-1">
                                        <p><strong>检测原理：</strong>通过电感耦合等离子体离子化，质谱检测器定量</p>
                                        <p><strong>检测限：</strong>0.0001 mg/L</p>
                                        <p><strong>适用范围：</strong>痕量分析，多种金属同时测定</p>
                                        <p><strong>标准依据：</strong>HJ 700-2014</p>
                                    </div>
                                </div>
                                
                                <div class="border-l-4 border-purple-400 pl-4">
                                    <h5 class="font-medium text-slate-800">3. 二乙氨基二硫代甲酸银分光光度法</h5>
                                    <div class="mt-2 text-sm text-slate-600 space-y-1">
                                        <p><strong>检测原理：</strong>铜与二乙氨基二硫代甲酸钠形成络合物，用四氯化碳萃取</p>
                                        <p><strong>检测限：</strong>0.005 mg/L</p>
                                        <p><strong>适用范围：</strong>地表水、工业废水</p>
                                        <p><strong>标准依据：</strong>GB 7473-1987</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 质量控制 -->
                        <div>
                            <h4 class="font-semibold text-slate-800 mb-4">质量控制要求</h4>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <h5 class="font-medium text-slate-700 mb-2">精密度控制</h5>
                                    <ul class="text-sm text-slate-600 space-y-1">
                                        <li>• 平行双样相对偏差≤10%</li>
                                        <li>• 加标回收率：85%-115%</li>
                                        <li>• 空白试验：低于方法检测限</li>
                                    </ul>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <h5 class="font-medium text-slate-700 mb-2">准确度控制</h5>
                                    <ul class="text-sm text-slate-600 space-y-1">
                                        <li>• 使用标准物质校准</li>
                                        <li>• 定期参加能力验证</li>
                                        <li>• 方法验证：检出限、定量限</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 深圳监测站特色 -->
                        <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-5 rounded-lg">
                            <h4 class="font-semibold text-green-800 mb-3 flex items-center">
                                <i class="fas fa-star mr-2"></i>
                                深圳监测站特色
                            </h4>
                            <div class="text-sm text-green-700 space-y-2">
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                    <p>配备先进ICP-MS仪器，实现多种金属同时测定</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                    <p>建立完整的水质监测网络，覆盖主要流域</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                    <p>实施严格的质量保证/质量控制(QA/QC)体系</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                    <p>定期参加国家和省级能力验证考核</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 参考文献和引用来源 -->
                        <div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-5 rounded-lg">
                            <h4 class="font-semibold text-indigo-800 mb-4 flex items-center">
                                <i class="fas fa-bookmark mr-2"></i>
                                参考文献和引用来源
                            </h4>
                            <div class="space-y-3">
                                <!-- 知识库文档引用 -->
                                <div>
                                    <h5 class="font-medium text-indigo-700 mb-2">知识库文档</h5>
                                    <div class="space-y-2">
                                        <div class="flex items-start space-x-2 p-2 bg-white rounded-lg cursor-pointer hover:bg-indigo-50 transition-colors" onclick="showDocument('GB_3838_2002')">
                                            <i class="fas fa-file-alt text-indigo-500 mt-0.5"></i>
                                            <div class="flex-1">
                                                <p class="text-sm text-slate-800">《地表水环境质量标准》(GB 3838-2002)</p>
                                                <p class="text-xs text-slate-500">引用位置：标准限值要求、监测方法选择</p>
                                            </div>
                                            <i class="fas fa-external-link-alt text-indigo-400 text-xs"></i>
                                        </div>
                                        <div class="flex items-start space-x-2 p-2 bg-white rounded-lg cursor-pointer hover:bg-indigo-50 transition-colors" onclick="showDocument('HJ_700_2014')">
                                            <i class="fas fa-file-alt text-indigo-500 mt-0.5"></i>
                                            <div class="flex-1">
                                                <p class="text-sm text-slate-800">《水质 65种元素的测定 电感耦合等离子体质谱法》(HJ 700-2014)</p>
                                                <p class="text-xs text-slate-500">引用位置：ICP-MS方法技术参数</p>
                                            </div>
                                            <i class="fas fa-external-link-alt text-indigo-400 text-xs"></i>
                                        </div>
                                        <div class="flex items-start space-x-2 p-2 bg-white rounded-lg cursor-pointer hover:bg-indigo-50 transition-colors" onclick="showDocument('GB_T_7475_1987')">
                                            <i class="fas fa-file-alt text-indigo-500 mt-0.5"></i>
                                            <div class="flex-1">
                                                <p class="text-sm text-slate-800">《水质 铜、锌、铅、镉的测定 原子吸收分光光度法》(GB/T 7475-1987)</p>
                                                <p class="text-xs text-slate-500">引用位置：原子吸收分光光度法原理</p>
                                            </div>
                                            <i class="fas fa-external-link-alt text-indigo-400 text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 互联网文章引用 -->
                                <div>
                                    <h5 class="font-medium text-indigo-700 mb-2">互联网文章</h5>
                                    <div class="space-y-2">
                                        <div class="flex items-start space-x-2 p-2 bg-white rounded-lg cursor-pointer hover:bg-indigo-50 transition-colors" onclick="showWebpage('article_1')">
                                            <i class="fas fa-globe text-indigo-500 mt-0.5"></i>
                                            <div class="flex-1">
                                                <p class="text-sm text-slate-800">深圳环境监测站最新技术进展</p>
                                                <p class="text-xs text-slate-500">引用位置：深圳监测站特色、ICP-MS设备介绍</p>
                                            </div>
                                            <i class="fas fa-external-link-alt text-indigo-400 text-xs"></i>
                                        </div>
                                        <div class="flex items-start space-x-2 p-2 bg-white rounded-lg cursor-pointer hover:bg-indigo-50 transition-colors" onclick="showWebpage('article_2')">
                                            <i class="fas fa-globe text-indigo-500 mt-0.5"></i>
                                            <div class="flex-1">
                                                <p class="text-sm text-slate-800">水中重金属检测技术最新研究进展</p>
                                                <p class="text-xs text-slate-500">引用位置：检测技术发展趋势</p>
                                            </div>
                                            <i class="fas fa-external-link-alt text-indigo-400 text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 处理时间信息 -->
                        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                            <span class="text-sm text-slate-600">处理完成时间</span>
                            <span class="text-sm font-medium text-slate-800">${new Date().toLocaleTimeString()}</span>
                        </div>
                    </div>
                </div>
              `;
            
            resultArea.innerHTML = results;
            
            // 启动处理动画
            simulateKnowledgeProcessing();
            
            // 重新初始化事件监听器以确保动态内容正常工作
            setTimeout(() => {
                initializeEventListeners();
                setupProcessingNodes();
            }, 100);
        }

        // 数据问答对话
        function loadDataConversation() {
            const chatArea = document.getElementById('chatArea');
            const resultArea = document.getElementById('resultArea');
            
            const userMessage = `
                <div class="chat-message flex justify-end">
                    <div class="flex items-start space-x-3 max-w-[80%]">
                        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-br-sm p-4 shadow-lg">
                            <p class="text-white text-sm leading-relaxed">最近一个月深圳市的AQI变化趋势，请帮我分析一下</p>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                    </div>
                </div>
            `;
            
            const aiResponse = `
                <div class="chat-message flex justify-start">
                    <div class="flex items-start space-x-3 max-w-[90%]">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-robot text-white text-sm"></i>
                        </div>
                        <div class="glass-effect rounded-2xl p-6 shadow-xl border border-slate-200">
                            <div class="mb-4">
                                <p class="text-slate-700 text-sm leading-relaxed mb-3">
                                    我理解您的需求，正在为您分析深圳最近一个月的AQI变化趋势。让我制定一个完整的处理计划：
                                </p>
                            </div>
                            
                            <!-- 进度条 -->
                            <div class="mb-6">
                                <div class="flex justify-between text-xs text-slate-500 mb-2">
                                    <span>处理进度</span>
                                    <span id="progressText">20%</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div id="progressBar" class="progress-bar" style="width: 20%"></div>
                                </div>
                            </div>
                            
                            <!-- Todo List -->
                            <div class="space-y-3">
                                <div class="todo-item processing-node active p-4 rounded-xl border-2 border-green-200 bg-white cursor-pointer" data-step="1">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
                                                <i class="fas fa-check text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">1. 需求分析</p>
                                                <p class="text-xs text-slate-500 mt-1">已理解用户需要深圳AQI趋势分析</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-green-600 font-medium">已完成</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-blue-200 bg-white cursor-pointer" data-step="2">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                                                <div class="loading-dots">
                                                    <span></span>
                                                    <span></span>
                                                    <span></span>
                                                </div>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">2. SQL生成</p>
                                                <p class="text-xs text-slate-500 mt-1">正在生成查询语句</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-blue-600 font-medium">处理中</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-database text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">3. 数据查询</p>
                                                <p class="text-xs text-slate-500 mt-1">执行SQL获取AQI数据</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="4">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-chart-bar text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">4. 数据处理</p>
                                                <p class="text-xs text-slate-500 mt-1">清洗和分析数据</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="5">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-file-chart text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">5. 生成报告</p>
                                                <p class="text-xs text-slate-500 mt-1">创建图表和业务解读</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            chatArea.innerHTML = userMessage + aiResponse;
            
            // 结果面板内容
            const results = `
                <!-- SQL生成结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="2">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fas fa-database text-blue-600"></i>
                            </div>
                            SQL查询语句
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">步骤 2</span>
                            <button class="text-slate-400 hover:text-slate-600" onclick="copyToClipboard(this)">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    <div class="code-block">
                        <pre class="text-green-400">-- 深圳市最近30天AQI数据查询
SELECT
    date,
    aqi_value,
    pm25,
    pm10,
    no2,
    so2,
    co,
    o3,
    quality_level,
    primary_pollutant
FROM air_quality_data
WHERE city = '深圳市'
    AND date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY)
ORDER BY date ASC
LIMIT 1000;</pre>
                    </div>
                </div>
                
                <!-- 数据查询结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="3">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center mr-3">
                                <i class="fas fa-table text-green-600"></i>
                            </div>
                            查询结果预览
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">步骤 3</span>
                            <span class="text-xs text-slate-500">共 30 条记录</span>
                            <button class="text-xs text-green-600 hover:text-green-800">
                                <i class="fas fa-download mr-1"></i>下载 XLSX
                            </button>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-slate-50">
                                <tr>
                                    <th class="text-left p-3 font-semibold text-slate-700">日期</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">AQI</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">PM2.5</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">等级</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">主要污染物</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200">
                                <tr class="hover:bg-slate-50">
                                    <td class="p-3">2024-01-15</td>
                                    <td class="p-3"><span class="font-medium text-green-600">45</span></td>
                                    <td class="p-3">32</td>
                                    <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">优</span></td>
                                    <td class="p-3 text-slate-500">-</td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <td class="p-3">2024-01-14</td>
                                    <td class="p-3"><span class="font-medium text-green-600">52</span></td>
                                    <td class="p-3">38</td>
                                    <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">优</span></td>
                                    <td class="p-3 text-slate-500">-</td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <td class="p-3">2024-01-13</td>
                                    <td class="p-3"><span class="font-medium text-yellow-600">68</span></td>
                                    <td class="p-3">49</td>
                                    <td class="p-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">良</span></td>
                                    <td class="p-3 text-slate-500">PM2.5</td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <td class="p-3">2024-01-12</td>
                                    <td class="p-3"><span class="font-medium text-yellow-600">73</span></td>
                                    <td class="p-3">55</td>
                                    <td class="p-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">良</span></td>
                                    <td class="p-3 text-slate-500">PM2.5</td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <td class="p-3">2024-01-11</td>
                                    <td class="p-3"><span class="font-medium text-green-600">58</span></td>
                                    <td class="p-3">42</td>
                                    <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">优</span></td>
                                    <td class="p-3 text-slate-500">-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页控件 -->
                    <div class="flex items-center justify-between mt-4">
                        <span class="text-xs text-slate-500">显示 1-5 条，共 30 条记录</span>
                        <div class="flex space-x-1">
                            <button class="pagination-btn px-2 py-1 text-xs border border-slate-300 rounded">上一页</button>
                            <button class="pagination-btn px-2 py-1 text-xs border border-slate-300 rounded bg-slate-100">1</button>
                            <button class="pagination-btn px-2 py-1 text-xs border border-slate-300 rounded">2</button>
                            <button class="pagination-btn px-2 py-1 text-xs border border-slate-300 rounded">下一页</button>
                        </div>
                    </div>
                </div>
                
                <!-- 最终分析结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="5">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                                <i class="fas fa-chart-line text-purple-600"></i>
                            </div>
                            AQI趋势分析结果
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">最终结果</span>
                            <div class="flex space-x-2">
                                <button class="feedback-btn text-slate-400 hover:text-green-500" onclick="toggleFeedback(this, 'like')">
                                    <i class="fas fa-thumbs-up"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-red-500" onclick="toggleFeedback(this, 'dislike')">
                                    <i class="fas fa-thumbs-down"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-blue-500" onclick="showFeedbackDialog()">
                                    <i class="fas fa-comment"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 图表 -->
                    <div class="mb-6">
                        <canvas id="aqiChart" width="400" height="250"></canvas>
                    </div>
                    
                    <!-- 统计卡片 -->
                    <div class="grid grid-cols-2 gap-4 mb-6">
                        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-slate-600">平均AQI</p>
                                    <p class="text-2xl font-bold text-indigo-600">58.2</p>
                                </div>
                                <i class="fas fa-chart-bar text-indigo-400 text-2xl"></i>
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 rounded-lg">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-slate-600">优良天数</p>
                                    <p class="text-2xl font-bold text-green-600">100%</p>
                                </div>
                                <i class="fas fa-leaf text-green-400 text-2xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 业务解读 -->
                    <div class="bg-gradient-to-r from-indigo-50 to-purple-50 border-l-4 border-indigo-400 p-5 rounded-lg">
                        <h4 class="font-semibold text-indigo-800 mb-3 flex items-center">
                            <i class="fas fa-lightbulb mr-2"></i>
                            智能业务解读
                        </h4>
                        <div class="space-y-2 text-sm text-indigo-700">
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-indigo-500 mt-0.5"></i>
                                <p>过去30天深圳AQI平均值为58.2，空气质量整体优良</p>
                            </div>
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-indigo-500 mt-0.5"></i>
                                <p>AQI值在45-73之间波动，无异常升高趋势</p>
                            </div>
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-check-circle text-indigo-500 mt-0.5"></i>
                                <p>优等级天数占比60%，良等级天数占比40%</p>
                            </div>
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-exclamation-triangle text-yellow-500 mt-0.5"></i>
                                <p>主要污染物为PM2.5，建议加强工业排放管控</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            resultArea.innerHTML = results;
            
            // 初始化图表
            initAQIChart();
            
            // 启动处理动画
            simulateDataProcessing();
            
            // 重新初始化事件监听器以确保动态内容正常工作
            setTimeout(() => {
                initializeEventListeners();
                setupProcessingNodes();
            }, 100);
        }

        // 图片问答对话
        function loadImageConversation() {
            const chatArea = document.getElementById('chatArea');
            const resultArea = document.getElementById('resultArea');
            
            const userMessage = `
                <div class="chat-message flex justify-end">
                    <div class="flex items-start space-x-3 max-w-[80%]">
                        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-br-sm p-4 shadow-lg">
                            <p class="text-white text-sm leading-relaxed mb-2">帮我从空气质量管控的角度，对这张图片做解读</p>
                            <div class="bg-white p-2 rounded-lg">
                                <img src="https://picsum.photos/seed/ozone-chart/300/200.jpg" alt="臭氧变化趋势图" class="rounded">
                            </div>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                    </div>
                </div>
            `;
            
            const aiResponse = `
                <div class="chat-message flex justify-start">
                    <div class="flex items-start space-x-3 max-w-[90%]">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-robot text-white text-sm"></i>
                        </div>
                        <div class="glass-effect rounded-2xl p-6 shadow-xl border border-slate-200">
                            <div class="mb-4">
                                <p class="text-slate-700 text-sm leading-relaxed mb-3">
                                    我看到您上传了一张臭氧变化趋势图，让我为您进行专业的图像分析：
                                </p>
                            </div>
                            
                            <!-- 进度条 -->
                            <div class="mb-6">
                                <div class="flex justify-between text-xs text-slate-500 mb-2">
                                    <span>处理进度</span>
                                    <span id="progressText">25%</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div id="progressBar" class="progress-bar" style="width: 25%"></div>
                                </div>
                            </div>
                            
                            <!-- Todo List -->
                            <div class="space-y-3">
                                <div class="todo-item processing-node active p-4 rounded-xl border-2 border-green-200 bg-white cursor-pointer" data-step="1">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
                                                <i class="fas fa-check text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">1. Agent选择</p>
                                                <p class="text-xs text-slate-500 mt-1">已选择图像分析专家Agent</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-green-600 font-medium">已完成</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-blue-200 bg-white cursor-pointer" data-step="2">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                                                <div class="loading-dots">
                                                    <span></span>
                                                    <span></span>
                                                    <span></span>
                                                </div>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">2. 图像分析</p>
                                                <p class="text-xs text-slate-500 mt-1">正在识别图表内容和数据</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-blue-600 font-medium">处理中</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-chart-line text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">3. 数据提取</p>
                                                <p class="text-xs text-slate-500 mt-1">提取关键数据点</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="4">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-file-alt text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">4. 生成解读</p>
                                                <p class="text-xs text-slate-500 mt-1">结合专业知识进行分析</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            chatArea.innerHTML = userMessage + aiResponse;
            
            // 结果面板内容
            const results = `
                <!-- Agent选择结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="1">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center mr-3">
                                <i class="fas fa-robot text-green-600"></i>
                            </div>
                            Agent选择结果
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">步骤 1</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center">
                                <i class="fas fa-image text-white"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-slate-800">图像分析专家</h4>
                                <p class="text-sm text-slate-600">擅长图表识别、数据提取和专业解读</p>
                            </div>
                        </div>
                        <div class="bg-green-50 p-3 rounded-lg">
                            <p class="text-sm text-green-800">
                                <i class="fas fa-check-circle mr-2"></i>
                                已启用MCP工具：图像识别、数据提取、趋势分析
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 图像分析结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="2">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fas fa-eye text-blue-600"></i>
                            </div>
                            图像识别结果
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">步骤 2</span>
                            <span class="text-xs text-slate-500">识别准确率: 95%</span>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-slate-800 mb-2">图表类型</h4>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">折线图</span>
                                <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">时间序列</span>
                                <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">多指标对比</span>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-slate-800 mb-2">识别的元素</h4>
                            <div class="grid grid-cols-2 gap-2 text-sm">
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check text-green-500"></i>
                                    <span>X轴：时间（2024年1月）</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check text-green-500"></i>
                                    <span>Y轴：浓度（μg/m³）</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check text-green-500"></i>
                                    <span>蓝色线：O₃浓度</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check text-green-500"></i>
                                    <span>红色线：NO₂浓度</span>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-slate-800 mb-2">关键数据点</h4>
                            <div class="bg-slate-50 p-3 rounded-lg text-sm">
                                <div class="space-y-1">
                                    <div>• O₃最高值：165 μg/m³ (1月15日)</div>
                                    <div>• O₃最低值：85 μg/m³ (1月8日)</div>
                                    <div>• NO₂最高值：95 μg/m³ (1月12日)</div>
                                    <div>• NO₂最低值：45 μg/m³ (1月5日)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            resultArea.innerHTML = results;
            
            // 启动处理动画
            simulateImageProcessing();
            
            // 重新初始化事件监听器以确保动态内容正常工作
            setTimeout(() => {
                initializeEventListeners();
                setupProcessingNodes();
            }, 100);
        }

        // 代码问答对话
        function loadCodeConversation() {
            const chatArea = document.getElementById('chatArea');
            const resultArea = document.getElementById('resultArea');
            
            const userMessage = `
                <div class="chat-message flex justify-end">
                    <div class="flex items-start space-x-3 max-w-[80%]">
                        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-br-sm p-4 shadow-lg">
                            <p class="text-white text-sm leading-relaxed mb-2">请帮我审查这段Python代码，找出潜在的性能问题：</p>
                            <div class="code-block text-xs">
                                <pre>def process_data(data):
    result = []
    for i in range(len(data)):
        if data[i] > 0:
            result.append(data[i] * 2)
    return result</pre>
                            </div>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                    </div>
                </div>
            `;
            
            const aiResponse = `
                <div class="chat-message flex justify-start">
                    <div class="flex items-start space-x-3 max-w-[90%]">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-robot text-white text-sm"></i>
                        </div>
                        <div class="glass-effect rounded-2xl p-6 shadow-xl border border-slate-200">
                            <div class="mb-4">
                                <p class="text-slate-700 text-sm leading-relaxed mb-3">
                                    我正在分析您的Python代码，检查潜在的性能问题和优化建议：
                                </p>
                            </div>
                            
                            <!-- 进度条 -->
                            <div class="mb-6">
                                <div class="flex justify-between text-xs text-slate-500 mb-2">
                                    <span>处理进度</span>
                                    <span id="progressText">30%</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div id="progressBar" class="progress-bar" style="width: 30%"></div>
                                </div>
                            </div>
                            
                            <!-- Todo List -->
                            <div class="space-y-3">
                                <div class="todo-item processing-node active p-4 rounded-xl border-2 border-green-200 bg-white cursor-pointer" data-step="1">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
                                                <i class="fas fa-check text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">1. 代码分析</p>
                                                <p class="text-xs text-slate-500 mt-1">已完成代码语法和结构分析</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-green-600 font-medium">已完成</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-blue-200 bg-white cursor-pointer" data-step="2">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                                                <div class="loading-dots">
                                                    <span></span>
                                                    <span></span>
                                                    <span></span>
                                                </div>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">2. 性能检测</p>
                                                <p class="text-xs text-slate-500 mt-1">正在检查性能瓶颈</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-blue-600 font-medium">处理中</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-code text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">3. 优化建议</p>
                                                <p class="text-xs text-slate-500 mt-1">生成优化方案</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="4">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-file-code text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">4. 生成报告</p>
                                                <p class="text-xs text-slate-500 mt-1">整理分析结果</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            chatArea.innerHTML = userMessage + aiResponse;
            
            // 结果面板内容
            const results = `
                <!-- 代码分析结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="1">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center mr-3">
                                <i class="fas fa-search text-green-600"></i>
                            </div>
                            代码分析结果
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">步骤 1</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="bg-green-50 p-3 rounded-lg">
                            <h4 class="font-medium text-green-800 mb-2">代码结构</h4>
                            <div class="text-sm text-green-700 space-y-1">
                                <div>• 函数名：process_data</div>
                                <div>• 参数：data (列表)</div>
                                <div>• 返回值：result (列表)</div>
                                <div>• 语法检查：通过</div>
                            </div>
                        </div>
                        
                        <div class="bg-blue-50 p-3 rounded-lg">
                            <h4 class="font-medium text-blue-800 mb-2">代码逻辑</h4>
                            <div class="text-sm text-blue-700 space-y-1">
                                <div>• 遍历输入列表</div>
                                <div>• 过滤大于0的元素</div>
                                <div>• 将过滤后的元素乘以2</div>
                                <div>• 返回新列表</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 性能分析结果 -->
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="2">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center mr-3">
                                <i class="fas fa-tachometer-alt text-red-600"></i>
                            </div>
                            性能问题分析
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">步骤 2</span>
                            <span class="text-xs text-slate-500">发现 3 个问题</span>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="border-l-4 border-red-400 pl-4">
                            <h4 class="font-medium text-red-800 mb-1">性能问题 #1</h4>
                            <p class="text-sm text-red-700 mb-2">使用range(len())进行索引访问效率低</p>
                            <div class="bg-red-50 p-2 rounded text-xs text-red-600">
                                位置：第3行 | 影响：中等 | 建议：使用直接遍历
                            </div>
                        </div>
                        
                        <div class="border-l-4 border-orange-400 pl-4">
                            <h4 class="font-medium text-orange-800 mb-1">性能问题 #2</h4>
                            <p class="text-sm text-orange-700 mb-2">循环中频繁调用append()方法</p>
                            <div class="bg-orange-50 p-2 rounded text-xs text-orange-600">
                                位置：第5行 | 影响：轻微 | 建议：使用列表推导式
                            </div>
                        </div>
                        
                        <div class="border-l-4 border-yellow-400 pl-4">
                            <h4 class="font-medium text-yellow-800 mb-1">性能问题 #3</h4>
                            <p class="text-sm text-yellow-700 mb-2">缺少类型提示和文档字符串</p>
                            <div class="bg-yellow-50 p-2 rounded text-xs text-yellow-600">
                                位置：函数定义 | 影响：轻微 | 建议：添加类型注解
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            resultArea.innerHTML = results;
            
            // 启动处理动画
            simulateCodeProcessing();
            
            // 重新初始化事件监听器以确保动态内容正常工作
            setTimeout(() => {
                initializeEventListeners();
                setupProcessingNodes();
            }, 100);
        }

        // 处理节点和结果面板联动
        function setupProcessingNodes() {
            console.log('设置处理节点...');
            const processingNodes = document.querySelectorAll('.processing-node');
            const resultPanels = document.querySelectorAll('.result-panel');
            const todoItems = document.querySelectorAll('.todo-item');
            
            console.log('找到处理节点:', processingNodes.length);
            console.log('找到结果面板:', resultPanels.length);
            console.log('找到待办项目:', todoItems.length);

            processingNodes.forEach(node => {
                console.log('绑定处理节点:', node.dataset.step);
                
                // 移除旧的事件监听器
                node.removeEventListener('click', handleProcessingNodeClick);
                // 添加新的事件监听器
                node.addEventListener('click', handleProcessingNodeClick);
            });

            resultPanels.forEach(panel => {
                // 移除旧的事件监听器
                panel.removeEventListener('click', handleResultPanelClick);
                // 添加新的事件监听器
                panel.addEventListener('click', handleResultPanelClick);
            });
            
            // 绑定待办项目点击事件
            todoItems.forEach(item => {
                // 移除旧的事件监听器
                item.removeEventListener('click', handleTodoItemClick);
                // 添加新的事件监听器
                item.addEventListener('click', handleTodoItemClick);
            });
            
            console.log('处理节点设置完成');
        }

        // 处理节点点击处理函数
        function handleProcessingNodeClick(e) {
            const node = e.currentTarget;
            const step = node.dataset.step;
            console.log('处理节点被点击:', step);
            
            // 只有已完成的任务可以点击查看结果
            const statusSpan = node.querySelector('.text-xs.font-medium');
            if (statusSpan && statusSpan.textContent === '已完成') {
                const processingNodes = document.querySelectorAll('.processing-node');
                const resultPanels = document.querySelectorAll('.result-panel');
                
                processingNodes.forEach(n => n.classList.remove('active'));
                resultPanels.forEach(p => p.classList.remove('active'));
                
                node.classList.add('active');
                
                // 首先尝试找到对应步骤的结果面板
                let correspondingPanel = document.querySelector(`[data-result="${step}"]`);
                
                // 如果没有找到，且是最后一个步骤，则显示最终结果
                if (!correspondingPanel && step === '4') {
                    correspondingPanel = document.querySelector(`[data-result="final"]`);
                }
                
                if (correspondingPanel) {
                    console.log('找到对应结果面板:', step);
                    
                    // 添加高亮效果
                    correspondingPanel.style.border = '3px solid #10b981';
                    correspondingPanel.style.boxShadow = '0 0 20px rgba(16, 185, 129, 0.3)';
                    correspondingPanel.style.transition = 'all 0.3s ease';
                    
                    correspondingPanel.classList.add('active');
                    
                    // 确保面板可见
                    correspondingPanel.style.display = 'block';
                    
                    // 滚动到对应结果面板
                    setTimeout(() => {
                        const resultArea = document.getElementById('resultArea');
                        if (resultArea) {
                            const panelRect = correspondingPanel.getBoundingClientRect();
                            const areaRect = resultArea.getBoundingClientRect();
                            
                            // 计算相对位置
                            const relativeTop = panelRect.top - areaRect.top;
                            const scrollTop = resultArea.scrollTop;
                            
                            // 平滑滚动到面板位置
                            resultArea.scrollTo({
                                top: scrollTop + relativeTop - 20,
                                behavior: 'smooth'
                            });
                        }
                        
                        // 移除高亮效果
                        setTimeout(() => {
                            correspondingPanel.style.border = '';
                            correspondingPanel.style.boxShadow = '';
                        }, 2000);
                    }, 100);
                    
                } else {
                    console.log('未找到对应结果面板:', step);
                    console.log('当前存在的结果面板:', Array.from(document.querySelectorAll('.result-panel')).map(p => p.dataset.result));
                }
            } else {
                console.log('任务未完成，无法查看结果');
                console.log('当前状态:', statusSpan ? statusSpan.textContent : '状态未知');
            }
        }

        // 结果面板点击处理函数
        function handleResultPanelClick(e) {
            const panel = e.currentTarget;
            const result = panel.dataset.result;
            console.log('结果面板被点击:', result);
            
            const processingNodes = document.querySelectorAll('.processing-node');
            const resultPanels = document.querySelectorAll('.result-panel');
            
            processingNodes.forEach(n => n.classList.remove('active'));
            resultPanels.forEach(p => p.classList.remove('active'));
            
            panel.classList.add('active');
            
            const correspondingNode = document.querySelector(`[data-step="${result}"]`);
            if (correspondingNode) {
                console.log('找到对应处理节点:', result);
                correspondingNode.classList.add('active');
                correspondingNode.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center',
                    inline: 'nearest'
                });
            } else {
                console.log('未找到对应处理节点:', result);
            }
        }

        // 待办项目点击处理函数
        function handleTodoItemClick(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const todoItem = e.currentTarget;
            const step = todoItem.dataset.step;
            
            console.log('待办项目被点击:', step);
            
            // 移除所有待办项目的选中状态
            document.querySelectorAll('.todo-item').forEach(item => {
                item.classList.remove('selected');
                const details = item.querySelector('.task-details');
                if (details) {
                    details.classList.remove('show');
                }
            });
            
            // 添加当前待办项目的选中状态
            todoItem.classList.add('selected');
            const details = todoItem.querySelector('.task-details');
            if (details) {
                details.classList.add('show');
            }
            
            // 定位到右侧相关的输出结果
            const resultArea = document.getElementById('resultArea');
            if (resultArea) {
                // 查找对应的结果面板
                const targetPanel = resultArea.querySelector(`[data-result="${step}"]`);
                
                if (targetPanel) {
                    // 移除所有结果面板的高亮状态
                    resultArea.querySelectorAll('.result-panel').forEach(panel => {
                        panel.classList.remove('ring-2', 'ring-indigo-500', 'bg-indigo-50');
                    });
                    
                    // 高亮目标面板
                    targetPanel.classList.add('ring-2', 'ring-indigo-500', 'bg-indigo-50');
                    
                    // 滚动到目标面板
                    targetPanel.scrollIntoView({ 
                        behavior: 'smooth', 
                        block: 'start' 
                    });
                    
                    // 3秒后移除高亮
                    setTimeout(() => {
                        targetPanel.classList.remove('ring-2', 'ring-indigo-500', 'bg-indigo-50');
                    }, 3000);
                }
            }
        }

        // 模拟处理进度更新 - 知识问答
        function simulateKnowledgeProcessing() {
            const steps = [
                { step: 1, progress: 25, status: 'completed' },
                { step: 2, progress: 50, status: 'completed' },
                { step: 3, progress: 75, status: 'completed' },
                { step: 4, progress: 100, status: 'completed' }
            ];

            steps.forEach((stepData, index) => {
                setTimeout(() => {
                    updateProcessingStep(stepData);
                    // 在每个步骤完成后显示对应的结果面板
                    if (stepData.status === 'completed') {
                        const resultPanel = document.querySelector(`[data-result="${stepData.step}"]`);
                        if (resultPanel) {
                            resultPanel.style.display = 'block';
                            resultPanel.classList.add('active');
                        }
                        
                        // 第4步（生成回复）已经是最终答案，不需要额外显示最终结果
                        if (stepData.step === 4) {
                            // 滚动到最终答案
                            setTimeout(() => {
                                resultPanel.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }, 500);
                        }
                    }
                }, (index + 1) * 2000);
            });
        }

        // 模拟处理进度更新 - 数据问答
        function simulateDataProcessing() {
            const steps = [
                { step: 2, progress: 40, status: 'completed' },
                { step: 3, progress: 60, status: 'processing' },
                { step: 4, progress: 80, status: 'pending' },
                { step: 5, progress: 100, status: 'pending' }
            ];

            steps.forEach((stepData, index) => {
                setTimeout(() => {
                    updateProcessingStep(stepData);
                }, (index + 1) * 2500);
            });
        }

        // 模拟处理进度更新 - 图片问答
        function simulateImageProcessing() {
            const steps = [
                { step: 2, progress: 50, status: 'completed' },
                { step: 3, progress: 75, status: 'processing' },
                { step: 4, progress: 100, status: 'pending' }
            ];

            steps.forEach((stepData, index) => {
                setTimeout(() => {
                    updateProcessingStep(stepData);
                    if (stepData.step === 3) {
                        setTimeout(() => {
                            addImageDataExtraction();
                        }, 1000);
                    }
                }, (index + 1) * 2000);
            });
        }

        // 模拟处理进度更新 - 代码问答
        function simulateCodeProcessing() {
            const steps = [
                { step: 2, progress: 60, status: 'completed' },
                { step: 3, progress: 80, status: 'processing' },
                { step: 4, progress: 100, status: 'pending' }
            ];

            steps.forEach((stepData, index) => {
                setTimeout(() => {
                    updateProcessingStep(stepData);
                }, (index + 1) * 2000);
            });
        }

        // 更新处理步骤
        function updateProcessingStep(stepData) {
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            
            if (progressBar) {
                progressBar.style.width = stepData.progress + '%';
                progressText.textContent = stepData.progress + '%';
            }

            const node = document.querySelector(`[data-step="${stepData.step}"]`);
            if (node) {
                const iconContainer = node.querySelector('.w-6.h-6');
                const statusSpan = node.querySelector('.text-xs.font-medium');

                // 如果当前步骤设置为处理中，先将其他所有处理中的步骤重置为等待中
                if (stepData.status === 'processing') {
                    const allProcessingNodes = document.querySelectorAll('.processing-node');
                    allProcessingNodes.forEach(n => {
                        if (n !== node) {
                            const nIconContainer = n.querySelector('.w-6.h-6');
                            const nStatusSpan = n.querySelector('.text-xs.font-medium');
                            
                            if (nStatusSpan.textContent === '处理中') {
                                nIconContainer.innerHTML = n.querySelector('.fas').outerHTML;
                                nIconContainer.className = 'w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center';
                                nStatusSpan.textContent = '等待中';
                                nStatusSpan.className = 'text-xs text-slate-500 font-medium';
                                n.classList.remove('active');
                            }
                        }
                    });
                }

                if (stepData.status === 'completed') {
                    iconContainer.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
                    iconContainer.className = 'w-6 h-6 rounded-full bg-green-500 flex items-center justify-center';
                    statusSpan.textContent = '已完成';
                    statusSpan.className = 'text-xs text-green-600 font-medium';
                    
                    // 添加完成提示和点击效果
                    node.classList.add('completed-task');
                    node.style.cursor = 'pointer';
                    
                    // 添加点击提示
                    if (!node.querySelector('.click-hint')) {
                        const hint = document.createElement('div');
                        hint.className = 'click-hint text-xs text-green-600 mt-1 opacity-0 transition-opacity';
                        hint.textContent = '';
                        node.appendChild(hint);
                        
                        setTimeout(() => {
                            hint.classList.remove('opacity-0');
                        }, 500);
                    }
                    
                } else if (stepData.status === 'processing') {
                    iconContainer.innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';
                    iconContainer.className = 'w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center';
                    statusSpan.textContent = '处理中';
                    statusSpan.className = 'text-xs text-blue-600 font-medium';
                }

                node.classList.add('active');
                const panel = document.querySelector(`[data-result="${stepData.step}"]`);
                if (panel) panel.classList.add('active');
            }
        }

        // 添加知识搜索结果
        function addKnowledgeSearchResults() {
            const resultArea = document.getElementById('resultArea');
            const searchResults = `
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="3">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-yellow-100 flex items-center justify-center mr-3">
                                <i class="fas fa-search text-yellow-600"></i>
                            </div>
                            互联网搜索结果
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">步骤 3</span>
                            <span class="text-xs text-slate-500">找到 8 篇相关文章</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="border-l-4 border-yellow-400 pl-4">
                            <h4 class="font-medium text-slate-800">深圳市生态环境监测中心官网</h4>
                            <p class="text-sm text-slate-600 mt-1">深圳市地表水监测方法和技术规范</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-yellow-600 bg-yellow-50 px-2 py-1 rounded">官方网站</span>
                                <span class="text-xs text-slate-500">相关度: 92%</span>
                            </div>
                        </div>
                        <div class="border-l-4 border-yellow-400 pl-4">
                            <h4 class="font-medium text-slate-800">《环境监测分析方法标准汇编》</h4>
                            <p class="text-sm text-slate-600 mt-1">包含铜的原子吸收、ICP-MS等多种分析方法</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-yellow-600 bg-yellow-50 px-2 py-1 rounded">技术文档</span>
                                <span class="text-xs text-slate-500">相关度: 88%</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                                <i class="fas fa-file-alt text-purple-600"></i>
                            </div>
                            完整分析结果
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">最终结果</span>
                            <div class="flex space-x-2">
                                <button class="feedback-btn text-slate-400 hover:text-green-500" onclick="toggleFeedback(this, 'like')">
                                    <i class="fas fa-thumbs-up"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-red-500" onclick="toggleFeedback(this, 'dislike')">
                                    <i class="fas fa-thumbs-down"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-blue-500" onclick="showFeedbackDialog()">
                                    <i class="fas fa-comment"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="bg-gradient-to-r from-blue-50 to-purple-50 p-4 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-3">深圳监测站地表水中铜的分析方法</h4>
                            <div class="space-y-3 text-sm">
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-flask text-blue-600 mt-0.5"></i>
                                    <div>
                                        <p class="font-medium text-slate-800">原子吸收分光光度法 (AAS)</p>
                                        <p class="text-slate-600">检出限：0.001 mg/L，适用于地表水和废水</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-flask text-blue-600 mt-0.5"></i>
                                    <div>
                                        <p class="font-medium text-slate-800">电感耦合等离子体质谱法 (ICP-MS)</p>
                                        <p class="text-slate-600">检出限：0.0001 mg/L，高精度分析</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-flask text-blue-600 mt-0.5"></i>
                                    <div>
                                        <p class="font-medium text-slate-800">二乙基二硫代氨基甲酸钠分光光度法</p>
                                        <p class="text-slate-600">检出限：0.01 mg/L，常规监测方法</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-slate-50 p-4 rounded-lg">
                            <h4 class="font-medium text-slate-800 mb-2">技术标准参考</h4>
                            <div class="space-y-2 text-sm text-slate-700">
                                <div>• GB 3838-2002 《地表水环境质量标准》</div>
                                <div>• HJ 485-2009 《水质 铜的测定 二乙基二硫代氨基甲酸钠分光光度法》</div>
                                <div>• HJ 776-2015 《水质 32种元素的测定 电感耦合等离子体质谱法》</div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            resultArea.innerHTML += searchResults;
            setupProcessingNodes();
        }

        // 添加图片数据提取结果
        function addImageDataExtraction() {
            const resultArea = document.getElementById('resultArea');
            const extractionResults = `
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="3">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center mr-3">
                                <i class="fas fa-chart-bar text-green-600"></i>
                            </div>
                            数据提取结果
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">步骤 3</span>
                            <span class="text-xs text-slate-500">提取 30 个数据点</span>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead class="bg-slate-50">
                                    <tr>
                                        <th class="text-left p-3 font-semibold text-slate-700">日期</th>
                                        <th class="text-left p-3 font-semibold text-slate-700">O₃ (μg/m³)</th>
                                        <th class="text-left p-3 font-semibold text-slate-700">NO₂ (μg/m³)</th>
                                        <th class="text-left p-3 font-semibold text-slate-700">O₃等级</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-200">
                                    <tr class="hover:bg-slate-50">
                                        <td class="p-3">1月1日</td>
                                        <td class="p-3"><span class="font-medium text-green-600">95</span></td>
                                        <td class="p-3">55</td>
                                        <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">优</span></td>
                                    </tr>
                                    <tr class="hover:bg-slate-50">
                                        <td class="p-3">1月8日</td>
                                        <td class="p-3"><span class="font-medium text-green-600">85</span></td>
                                        <td class="p-3">45</td>
                                        <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">优</span></td>
                                    </tr>
                                    <tr class="hover:bg-slate-50">
                                        <td class="p-3">1月15日</td>
                                        <td class="p-3"><span class="font-medium text-orange-600">165</span></td>
                                        <td class="p-3">75</td>
                                        <td class="p-3"><span class="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">轻度污染</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-3">
                            <div class="bg-blue-50 p-3 rounded-lg text-center">
                                <p class="text-xs text-blue-600">O₃平均值</p>
                                <p class="text-lg font-bold text-blue-800">118.5</p>
                            </div>
                            <div class="bg-green-50 p-3 rounded-lg text-center">
                                <p class="text-xs text-green-600">NO₂平均值</p>
                                <p class="text-lg font-bold text-green-800">68.2</p>
                            </div>
                            <div class="bg-purple-50 p-3 rounded-lg text-center">
                                <p class="text-xs text-purple-600">超标天数</p>
                                <p class="text-lg font-bold text-purple-800">2天</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-slate-800 flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                                <i class="fas fa-lightbulb text-purple-600"></i>
                            </div>
                            空气质量管控解读
                        </h3>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">最终结果</span>
                            <div class="flex space-x-2">
                                <button class="feedback-btn text-slate-400 hover:text-green-500" onclick="toggleFeedback(this, 'like')">
                                    <i class="fas fa-thumbs-up"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-red-500" onclick="toggleFeedback(this, 'dislike')">
                                    <i class="fas fa-thumbs-down"></i>
                                </button>
                                <button class="feedback-btn text-slate-400 hover:text-blue-500" onclick="showFeedbackDialog()">
                                    <i class="fas fa-comment"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="bg-gradient-to-r from-orange-50 to-red-50 border-l-4 border-orange-400 p-4 rounded-lg">
                            <h4 class="font-semibold text-orange-800 mb-3">关键发现</h4>
                            <div class="space-y-2 text-sm text-orange-700">
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-exclamation-triangle text-orange-500 mt-0.5"></i>
                                    <p>1月15日O₃浓度达到165μg/m³，超过国家标准限值(160μg/m³)</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-exclamation-triangle text-orange-500 mt-0.5"></i>
                                    <p>O₃与NO₂呈现正相关趋势，可能与光化学反应有关</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-exclamation-triangle text-orange-500 mt-0.5"></i>
                                    <p>月中O₃浓度明显升高，需要关注气象条件变化</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-r from-blue-50 to-green-50 border-l-4 border-blue-400 p-4 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-3">管控建议</h4>
                            <div class="space-y-2 text-sm text-blue-700">
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-blue-500 mt-0.5"></i>
                                    <p>加强VOCs排放管控，减少O₃前体物</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-blue-500 mt-0.5"></i>
                                    <p>关注高温天气条件下的O₃生成</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-blue-500 mt-0.5"></i>
                                    <p>建议增加午后时段的监测频次</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <i class="fas fa-check-circle text-blue-500 mt-0.5"></i>
                                    <p>考虑实施交通管控措施减少NOx排放</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            resultArea.innerHTML += extractionResults;
            setupProcessingNodes();
        }

        // 初始化AQI图表
        function initAQIChart() {
            const ctx = document.getElementById('aqiChart');
            if (!ctx) return;
            
            const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 250);
            gradient.addColorStop(0, 'rgba(99, 102, 241, 0.3)');
            gradient.addColorStop(1, 'rgba(99, 102, 241, 0.05)');

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['1月11日', '1月12日', '1月13日', '1月14日', '1月15日'],
                    datasets: [{
                        label: 'AQI指数',
                        data: [58, 73, 68, 52, 45],
                        borderColor: 'rgb(99, 102, 241)',
                        backgroundColor: gradient,
                        borderWidth: 3,
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: 'rgb(99, 102, 241)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 6,
                        pointHoverRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                padding: 20
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            title: {
                                display: true,
                                text: 'AQI指数',
                                font: {
                                    size: 12
                                }
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '日期',
                                font: {
                                    size: 12
                                }
                            },
                            grid: {
                                display: false
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        }

        // 语音输入功能
        const voiceBtn = document.getElementById('voiceBtn');
        voiceBtn.addEventListener('click', () => {
            isRecording = !isRecording;

            if (isRecording) {
                voiceBtn.classList.add('voice-recording', 'bg-red-100');
                voiceBtn.innerHTML = '<i class="fas fa-stop text-red-600"></i>';

                // 模拟语音识别
                setTimeout(() => {
                    document.getElementById('userInput').value = '最近一个月深圳市的AQI变化趋势分析';
                    isRecording = false;
                    voiceBtn.classList.remove('voice-recording', 'bg-red-100');
                    voiceBtn.innerHTML = '<i class="fas fa-microphone text-slate-600"></i>';
                }, 3000);
            } else {
                voiceBtn.classList.remove('voice-recording', 'bg-red-100');
                voiceBtn.innerHTML = '<i class="fas fa-microphone text-slate-600"></i>';
            }
        });

        // 输入框自动调整高度
        const userInput = document.getElementById('userInput');
        userInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
        });

        // Enter键发送消息
        userInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        // 发送按钮
        document.getElementById('sendBtn').addEventListener('click', sendMessage);

        // 发送消息功能
        function sendMessage() {
            const message = userInput.value.trim();
            if (!message) return;

            // 创建新的对话消息
            const chatArea = document.getElementById('chatArea');
            const userMsgHtml = `
                <div class="chat-message flex justify-end">
                    <div class="flex items-start space-x-3 max-w-[80%]">
                        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-br-sm p-4 shadow-lg">
                            <p class="text-white text-sm leading-relaxed">${message}</p>
                            <div class="timestamp user-timestamp">${new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</div>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                    </div>
                </div>
            `;
            
            chatArea.innerHTML += userMsgHtml;
            userInput.value = '';
            userInput.style.height = 'auto';

            // 创建通用的todo list响应
            setTimeout(() => {
                const aiResponse = createGenericResponse(message);
                chatArea.innerHTML += aiResponse;
                chatArea.scrollTop = chatArea.scrollHeight;
                
                // 清空结果面板
                document.getElementById('resultArea').innerHTML = '';
                
                // 开始执行任务序列
                startSequentialTaskExecution();
            }, 1000);
        }

        // 创建通用响应模板
        function createGenericResponse(message) {
            return `
                <div class="chat-message flex justify-start">
                    <div class="flex items-start space-x-3 max-w-[90%]">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-md">
                            <i class="fas fa-robot text-white text-sm"></i>
                        </div>
                        <div class="glass-effect rounded-2xl p-6 shadow-xl border border-slate-200">
                            <div class="mb-4">
                                <p class="text-slate-700 text-sm leading-relaxed mb-3">
                                    我正在处理您的问题，请稍候...
                                </p>
                                <div class="timestamp">${new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</div>
                            </div>
                            
                            <!-- 进度条 -->
                            <div class="mb-6">
                                <div class="flex justify-between text-xs text-slate-500 mb-2">
                                    <span>处理进度</span>
                                    <span id="progressText">0%</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div id="progressBar" class="progress-bar" style="width: 0%"></div>
                                </div>
                            </div>
                            
                            <!-- Todo List -->
                            <div class="space-y-3">
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="1">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-search text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">1. 问题分析</p>
                                                <p class="text-xs text-slate-500 mt-1">分析用户需求</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>问题分析详情</h4>
                                        <ul>
                                            <li>识别问题类型：${message.includes('铜') ? '环境监测' : message.includes('AQI') ? '数据分析' : '通用查询'}</li>
                                            <li>提取关键信息：${message}</li>
                                            <li>确定处理策略：基于问题类型选择相应的处理流程</li>
                                            <li>预期处理时间：1-2秒</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="2">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-database text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">2. 信息检索</p>
                                                <p class="text-xs text-slate-500 mt-1">搜索相关知识</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>信息检索详情</h4>
                                        <ul>
                                            <li>检索范围：知识库 + 互联网</li>
                                            <li>检索关键词：${message.split(' ').filter(word => word.length > 1).join(', ')}</li>
                                            <li>数据源：内部数据库、公开API、网络资源</li>
                                            <li>预期处理时间：2-3秒</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-cogs text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">3. 数据处理</p>
                                                <p class="text-xs text-slate-500 mt-1">分析和处理信息</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>数据处理详情</h4>
                                        <ul>
                                            <li>数据清洗：去除重复和无效信息</li>
                                            <li>信息整合：合并多个数据源的结果</li>
                                            <li>相关性排序：按照与问题的相关程度排序</li>
                                            <li>预期处理时间：1-2秒</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" data-step="4">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                <i class="fas fa-file-alt text-white text-xs"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-800">4. 生成回复</p>
                                                <p class="text-xs text-slate-500 mt-1">整理并生成完整回答</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">等待中</span>
                                    </div>
                                    <div class="task-details">
                                        <h4>生成回复详情</h4>
                                        <ul>
                                            <li>内容组织：按照逻辑顺序整理信息</li>
                                            <li>语言优化：确保表达清晰易懂</li>
                                            <li>格式调整：使用合适的格式展示结果</li>
                                            <li>预期处理时间：1-2秒</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 开始任务序列执行
        function startSequentialTaskExecution() {
            console.log('开始执行任务序列');
            
            // 等待DOM更新完成
            setTimeout(() => {
                setupProcessingNodes();
                executeTaskSequentially(1);
            }, 100);
        }

        // 依次执行任务
        function executeTaskSequentially(currentStep) {
            console.log(`开始执行步骤 ${currentStep}`);
            
            // 将当前任务设为处理中
            updateTaskStatus(currentStep, 'processing');
            
            // 模拟处理时间
            const processingTime = 2000 + Math.random() * 1000; // 2-3秒
            
            setTimeout(() => {
                // 将当前任务设为已完成
                updateTaskStatus(currentStep, 'completed');
                
                // 添加对应的结果面板
                addTaskResult(currentStep);
                
                // 如果还有下一个任务，继续执行
                if (currentStep < 4) {
                    setTimeout(() => {
                        executeTaskSequentially(currentStep + 1);
                    }, 500);
                } else {
                    // 所有任务完成
                    console.log('所有任务执行完成');
                    updateProgress(100);
                }
            }, processingTime);
        }

        // 更新任务状态
        function updateTaskStatus(step, status) {
            console.log(`更新任务 ${step} 状态为: ${status}`);
            
            const node = document.querySelector(`[data-step="${step}"]`);
            if (!node) return;
            
            const iconContainer = node.querySelector('.w-6.h-6');
            const statusSpan = node.querySelector('.text-xs.font-medium');
            
            if (status === 'processing') {
                // 清除所有任务的active状态
                document.querySelectorAll('.processing-node').forEach(n => {
                    n.classList.remove('active');
                });
                
                // 设置当前任务为active
                setTimeout(() => {
                    node.classList.add('active');
                    
                    // 添加状态转换动画
                    iconContainer.style.transform = 'scale(0.8)';
                    iconContainer.style.transition = 'transform 0.3s ease';
                    
                    setTimeout(() => {
                        iconContainer.innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';
                        iconContainer.className = 'w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center';
                        statusSpan.textContent = '处理中';
                        statusSpan.className = 'text-xs text-blue-600 font-medium';
                        
                        // 恢复大小
                        iconContainer.style.transform = 'scale(1)';
                    }, 150);
                }, 100);
                
                // 更新进度条
                updateProgress((step - 1) * 25);
                
            } else if (status === 'completed') {
                // 添加完成动画
                iconContainer.style.transform = 'scale(1.2)';
                iconContainer.style.transition = 'transform 0.3s ease';
                
                setTimeout(() => {
                    node.classList.remove('active');
                    iconContainer.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
                    iconContainer.className = 'w-6 h-6 rounded-full bg-green-500 flex items-center justify-center';
                    statusSpan.textContent = '已完成';
                    statusSpan.className = 'text-xs text-green-600 font-medium';
                    
                    // 添加完成动画效果
                    iconContainer.style.transform = 'scale(1)';
                    
                    // 添加闪烁效果
                    node.style.animation = 'taskComplete 0.6s ease';
                    setTimeout(() => {
                        node.style.animation = '';
                    }, 600);
                    
                    // 添加可点击类
                    node.classList.add('completed-task');
                }, 150);
                
                // 更新进度条
                updateProgress(step * 25);
            }
        }

        // 更新进度条
        function updateProgress(percentage) {
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            
            if (progressBar) {
                progressBar.style.width = percentage + '%';
            }
            if (progressText) {
                progressText.textContent = percentage + '%';
            }
        }

        // 添加任务结果
        function addTaskResult(step) {
            const resultArea = document.getElementById('resultArea');
            if (!resultArea) return;
            
            let resultContent = '';
            let resultIcon = '';
            let resultColor = '';
            let resultTitle = '';
            
            switch(step) {
                case 1:
                    resultIcon = 'fas fa-search';
                    resultColor = 'blue';
                    resultTitle = '问题分析结果';
                    resultContent = `
                        <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-4" data-result="${step}">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-semibold text-slate-800 flex items-center">
                                    <div class="w-8 h-8 rounded-lg bg-${resultColor}-100 flex items-center justify-center mr-3">
                                        <i class="${resultIcon} text-${resultColor}-600"></i>
                                    </div>
                                    ${resultTitle}
                                </h3>
                                <div class="text-xs text-green-600 font-medium flex items-center">
                                    <i class="fas fa-check-circle mr-1"></i>已完成
                                    <span class="ml-2 text-xs text-slate-400">${new Date().toLocaleTimeString()}</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="p-3 bg-${resultColor}-50 rounded-lg">
                                    <p class="text-sm text-slate-700">
                                        <strong>用户需求分析：</strong>用户询问的问题涉及多个方面的信息需求，
                                        需要综合分析和处理。
                                    </p>
                                </div>
                                <div class="p-3 bg-slate-50 rounded-lg">
                                    <p class="text-sm text-slate-700">
                                        <strong>关键要素识别：</strong>已识别出问题的核心要素，
                                        为后续处理做好准备。
                                    </p>
                                </div>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 2:
                    resultIcon = 'fas fa-database';
                    resultColor = 'green';
                    resultTitle = '信息检索结果';
                    resultContent = `
                        <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-4" data-result="${step}">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-semibold text-slate-800 flex items-center">
                                    <div class="w-8 h-8 rounded-lg bg-${resultColor}-100 flex items-center justify-center mr-3">
                                        <i class="${resultIcon} text-${resultColor}-600"></i>
                                    </div>
                                    ${resultTitle}
                                </h3>
                                <div class="text-xs text-green-600 font-medium flex items-center">
                                    <i class="fas fa-check-circle mr-1"></i>已完成
                                    <span class="ml-2 text-xs text-slate-400">${new Date().toLocaleTimeString()}</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="p-3 bg-${resultColor}-50 rounded-lg">
                                    <p class="text-sm text-slate-700">
                                        <strong>相关知识检索：</strong>已从知识库中检索到相关信息，
                                        为问题解答提供基础支持。
                                    </p>
                                </div>
                                <div class="p-3 bg-slate-50 rounded-lg">
                                    <p class="text-sm text-slate-700">
                                        <strong>数据源验证：</strong>已验证信息来源的可靠性，
                                        确保回答的准确性。
                                    </p>
                                </div>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 3:
                    resultIcon = 'fas fa-cogs';
                    resultColor = 'yellow';
                    resultTitle = '回答详情';
                    resultContent = `
                        <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-4" data-result="${step}">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-semibold text-slate-800 flex items-center">
                                    <div class="w-8 h-8 rounded-lg bg-${resultColor}-100 flex items-center justify-center mr-3">
                                        <i class="${resultIcon} text-${resultColor}-600"></i>
                                    </div>
                                    ${resultTitle}
                                </h3>
                                <div class="text-xs text-green-600 font-medium flex items-center">
                                    <i class="fas fa-check-circle mr-1"></i>已完成
                                    <span class="ml-2 text-xs text-slate-400">${new Date().toLocaleTimeString()}</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="p-3 bg-${resultColor}-50 rounded-lg">
                                    <p class="text-sm text-slate-700">
                                        <strong>信息整合：</strong>已将检索到的信息进行整合和处理，
                                        形成结构化的知识体系。
                                    </p>
                                </div>
                                <div class="p-3 bg-slate-50 rounded-lg">
                                    <p class="text-sm text-slate-700">
                                        <strong>质量检查：</strong>已完成数据质量检查，
                                        确保信息的完整性和一致性。
                                    </p>
                                </div>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 4:
                    resultIcon = 'fas fa-file-alt';
                    resultColor = 'purple';
                    resultTitle = '最终回复';
                    resultContent = `
                        <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-4" data-result="${step}">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-semibold text-slate-800 flex items-center">
                                    <div class="w-8 h-8 rounded-lg bg-${resultColor}-100 flex items-center justify-center mr-3">
                                        <i class="${resultIcon} text-${resultColor}-600"></i>
                                    </div>
                                    ${resultTitle}
                                </h3>
                                <div class="text-xs text-green-600 font-medium flex items-center">
                                    <i class="fas fa-check-circle mr-1"></i>已完成
                                    <span class="ml-2 text-xs text-slate-400">${new Date().toLocaleTimeString()}</span>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <div class="p-4 bg-${resultColor}-50 rounded-lg">
                                    <h4 class="font-medium text-slate-800 mb-2">综合回答</h4>
                                    <p class="text-sm text-slate-700 leading-relaxed">
                                        根据您的需求，我已经完成了全面的分析和处理。
                                        通过系统性的问题分析、信息检索、数据处理，
                                        为您提供了准确和完整的解答。
                                    </p>
                                </div>
                                <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                                    <span class="text-sm text-slate-600">处理完成时间</span>
                                    <span class="text-sm font-medium text-slate-800">${new Date().toLocaleTimeString()}</span>
                                </div>
                            </div>
                        </div>
                    `;
                    break;
            }
            
            // 添加结果到面板
            resultArea.innerHTML += resultContent;
            
            // 高亮新添加的结果
            setTimeout(() => {
                const newResult = resultArea.querySelector(`[data-result="${step}"]`);
                if (newResult) {
                    // 添加高亮效果
                    newResult.style.borderColor = '#10b981';
                    newResult.style.borderWidth = '2px';
                    
                    // 滚动到新结果
                    newResult.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center',
                        inline: 'nearest'
                    });
                    
                    // 3秒后恢复正常边框
                    setTimeout(() => {
                        newResult.style.borderColor = '';
                        newResult.style.borderWidth = '';
                    }, 3000);
                }
            }, 100);
            
            // 重新绑定处理节点事件
            setupProcessingNodes();
        }

        // 文件上传功能
        const uploadModal = document.getElementById('uploadModal');
        const uploadImage = document.getElementById('uploadImage');
        const uploadFile = document.getElementById('uploadFile');
        const fileInput = document.getElementById('fileInput');
        const uploadArea = uploadModal.querySelector('.upload-area');

        uploadImage.addEventListener('click', () => {
            uploadModal.classList.remove('hidden');
            fileInput.accept = 'image/*';
        });

        uploadFile.addEventListener('click', () => {
            uploadModal.classList.remove('hidden');
            fileInput.accept = '*';
        });

        // 拖拽上传
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            handleFiles(files);
        });

        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        fileInput.addEventListener('change', (e) => {
            handleFiles(e.target.files);
        });

        function handleFiles(files) {
            currentFiles = Array.from(files);
            // 显示文件信息
            const fileInfo = currentFiles.map(f => `${f.name} (${(f.size/1024/1024).toFixed(2)}MB)`).join(', ');
            console.log('选择的文件：', fileInfo);
        }

        document.getElementById('cancelUpload').addEventListener('click', () => {
            uploadModal.classList.add('hidden');
        });

        document.getElementById('confirmUpload').addEventListener('click', () => {
            if (currentFiles.length > 0) {
                // 模拟上传过程
                uploadModal.classList.add('hidden');
                // 在输入框中显示文件信息
                userInput.value += `\n[已上传 ${currentFiles.length} 个文件]`;
            }
        });

        // 代码输入功能
        const codeModal = document.getElementById('codeModal');
        const insertCode = document.getElementById('insertCode');
        const codeInput = document.getElementById('codeInput');

        insertCode.addEventListener('click', () => {
            codeModal.classList.remove('hidden');
        });

        document.getElementById('cancelCode').addEventListener('click', () => {
            codeModal.classList.add('hidden');
        });

        document.getElementById('confirmCode').addEventListener('click', () => {
            const code = codeInput.value.trim();
            if (code) {
                userInput.value += `\n\`\`\`\n${code}\n\`\`\``;
                codeInput.value = '';
                codeModal.classList.add('hidden');
            }
        });

        // MCP工具选择
        const mcpModal = document.getElementById('mcpModal');
        const mcpTools = document.getElementById('mcpTools');

        mcpTools.addEventListener('click', () => {
            mcpModal.classList.remove('hidden');
        });

        document.getElementById('cancelMcp').addEventListener('click', () => {
            mcpModal.classList.add('hidden');
        });

        document.getElementById('confirmMcp').addEventListener('click', () => {
            const checkboxes = mcpModal.querySelectorAll('input[type="checkbox"]:checked');
            selectedMcpTools = Array.from(checkboxes).map(cb => cb.nextElementSibling.textContent);
            if (selectedMcpTools.length > 0) {
                userInput.value += `\n[已选择MCP工具：${selectedMcpTools.join(', ')}]`;
            }
            mcpModal.classList.add('hidden');
        });

        // Agent选择
        const agentModal = document.getElementById('agentModal');
        const selectAgent = document.getElementById('selectAgent');

        selectAgent.addEventListener('click', () => {
            agentModal.classList.remove('hidden');
        });

        document.getElementById('cancelAgent').addEventListener('click', () => {
            agentModal.classList.add('hidden');
        });

        document.getElementById('confirmAgent').addEventListener('click', () => {
            const selectedAgentDiv = agentModal.querySelector('.bg-slate-50');
            if (selectedAgentDiv) {
                selectedAgent = selectedAgentDiv.querySelector('.font-medium').textContent;
                userInput.value += `\n[已选择Agent：${selectedAgent}]`;
            }
            agentModal.classList.add('hidden');
        });

    
        // 显示文档详情
        function showDocument(docId) {
            const documentData = {
                'GB_3838_2002': {
                    title: '《地表水环境质量标准》(GB 3838-2002)',
                    content: `
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800 mb-2">标准概述</h4>
                                <p class="text-sm text-blue-700">本标准规定了地表水环境质量分类、标准值、监测方法和评价要求。</p>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-green-800 mb-2">铜的监测要求</h4>
                                <div class="text-sm text-green-700 space-y-2">
                                    <p>• I类水质：≤0.01 mg/L</p>
                                    <p>• II类水质：≤0.01 mg/L</p>
                                    <p>• III类水质：≤0.01 mg/L</p>
                                    <p>• IV类水质：≤0.05 mg/L</p>
                                    <p>• V类水质：≤0.1 mg/L</p>
                                </div>
                            </div>
                            <div class="bg-yellow-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-yellow-800 mb-2">分析方法</h4>
                                <p class="text-sm text-yellow-700">推荐采用原子吸收分光光度法或电感耦合等离子体质谱法进行测定。</p>
                            </div>
                        </div>
                    `
                },
                'HJ_700_2014': {
                    title: '《水质 65种元素的测定 电感耦合等离子体质谱法》(HJ 700-2014)',
                    content: `
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800 mb-2">方法原理</h4>
                                <p class="text-sm text-blue-700">样品经过预处理后，用电感耦合等离子体质谱仪测定，以质荷比进行定性定量分析。</p>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-green-800 mb-2">技术参数</h4>
                                <div class="text-sm text-green-700 space-y-2">
                                    <p>• 检测限：0.0001 mg/L</p>
                                    <p>• 测定下限：0.0004 mg/L</p>
                                    <p>• 精密度：RSD ≤ 5%</p>
                                    <p>• 准确度：回收率 85%-115%</p>
                                </div>
                            </div>
                            <div class="bg-purple-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-purple-800 mb-2">适用范围</h4>
                                <p class="text-sm text-purple-700">适用于地表水、地下水、生活污水和工业废水中65种元素的同时测定。</p>
                            </div>
                        </div>
                    `
                },
                'GB_T_7475_1987': {
                    title: '《水质 铜、锌、铅、镉的测定 原子吸收分光光度法》(GB/T 7475-1987)',
                    content: `
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800 mb-2">方法原理</h4>
                                <p class="text-sm text-blue-700">将样品或消解处理后的样品直接吸入火焰中，在高温下铜原子化，基态原子对特征谱线产生吸收。</p>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-green-800 mb-2">技术参数</h4>
                                <div class="text-sm text-green-700 space-y-2">
                                    <p>• 检测波长：324.7 nm</p>
                                    <p>• 检测限：0.001 mg/L</p>
                                    <p>• 测定范围：0.05-5 mg/L</p>
                                    <p>• 火焰类型：空气-乙炔</p>
                                </div>
                            </div>
                            <div class="bg-orange-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-orange-800 mb-2">干扰消除</h4>
                                <p class="text-sm text-orange-700">通过选择合适的分析线和背景校正，消除光谱干扰。</p>
                            </div>
                        </div>
                    `
                }
            };

            const doc = documentData[docId];
            if (!doc) return;

            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            modal.innerHTML = `
                <div class="bg-white rounded-xl p-6 max-w-4xl w-full mx-4 max-h-[80vh] overflow-y-auto">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-xl font-semibold text-slate-800">${doc.title}</h3>
                        <button class="close-modal text-slate-400 hover:text-slate-600">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="prose prose-sm max-w-none">
                        ${doc.content}
                    </div>
                    <div class="mt-6 flex justify-end space-x-3">
                        <button class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">下载PDF</button>
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">查看原文</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);

            modal.addEventListener('click', (e) => {
                if (e.target === modal || e.target.classList.contains('close-modal') || e.target.classList.contains('fa-times')) {
                    document.body.removeChild(modal);
                }
            });
        }

        // 显示网页详情
        function showWebpage(articleId) {
            const articleData = {
                'article_1': {
                    title: '深圳环境监测站最新技术进展',
                    source: '深圳环保网',
                    date: '2024-01-15',
                    content: `
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800 mb-2">文章摘要</h4>
                                <p class="text-sm text-blue-700">本文详细介绍了深圳环境监测站近年来在监测技术方面的重大进展，特别是在重金属检测领域的技术升级。</p>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-green-800 mb-2">ICP-MS设备介绍</h4>
                                <p class="text-sm text-green-700">监测站引进了最新型号的电感耦合等离子体质谱仪，实现了多种重金属元素的同时测定，检测灵敏度达到ppb级别。</p>
                            </div>
                            <div class="bg-purple-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-purple-800 mb-2">应用成果</h4>
                                <p class="text-sm text-purple-700">新设备投入使用后，深圳水质监测的准确性和效率显著提升，为环境保护决策提供了更加可靠的数据支撑。</p>
                            </div>
                        </div>
                    `
                },
                'article_2': {
                    title: '水中重金属检测技术最新研究进展',
                    source: '中国环境科学',
                    date: '2024-01-10',
                    content: `
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800 mb-2">研究背景</h4>
                                <p class="text-sm text-blue-700">随着环保要求的不断提高，水中重金属检测技术也在快速发展，新的检测方法不断涌现。</p>
                            </div>
                            <div class="bg-yellow-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-yellow-800 mb-2">技术对比</h4>
                                <div class="text-sm text-yellow-700 space-y-2">
                                    <p>• 原子吸收法：经典方法，成本较低，灵敏度适中</p>
                                    <p>• ICP-MS法：高灵敏度，多元素同时分析，成本较高</p>
                                    <p>• 电化学法：便携性好，适合现场快速检测</p>
                                </div>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-green-800 mb-2">发展趋势</h4>
                                <p class="text-sm text-green-700">未来发展趋势向高灵敏度、高选择性、自动化和智能化方向发展。</p>
                            </div>
                        </div>
                    `
                },
                'article_3': {
                    title: '深圳水质监测网络建设成果展示',
                    source: '深圳市生态环境局',
                    date: '2024-01-08',
                    content: `
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-blue-800 mb-2">项目概述</h4>
                                <p class="text-sm text-blue-700">深圳市建立了覆盖全市的水质监测网络，包括国控、省控、市控监测站点，形成了完整的监测体系。</p>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-green-800 mb-2">监测能力</h4>
                                <div class="text-sm text-green-700 space-y-2">
                                    <p>• 监测站点：45个水质自动监测站</p>
                                    <p>• 监测参数：包括重金属在内的109项指标</p>
                                    <p>• 监测频率：重点断面每日监测</p>
                                </div>
                            </div>
                            <div class="bg-purple-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-purple-800 mb-2">技术支撑</h4>
                                <p class="text-sm text-purple-700">配备了先进的ICP-MS、原子吸收等大型分析仪器，建立了完善的质量控制体系。</p>
                            </div>
                        </div>
                    `
                }
            };

            const article = articleData[articleId];
            if (!article) return;

            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            modal.innerHTML = `
                <div class="bg-white rounded-xl p-6 max-w-4xl w-full mx-4 max-h-[80vh] overflow-y-auto">
                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h3 class="text-xl font-semibold text-slate-800">${article.title}</h3>
                            <div class="flex items-center space-x-4 mt-2 text-sm text-slate-500">
                                <span>来源：${article.source}</span>
                                <span>发布时间：${article.date}</span>
                            </div>
                        </div>
                        <button class="close-modal text-slate-400 hover:text-slate-600">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="prose prose-sm max-w-none">
                        ${article.content}
                    </div>
                    <div class="mt-6 flex justify-end space-x-3">
                        <button class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">访问原网页</button>
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">收藏文章</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);

            modal.addEventListener('click', (e) => {
                if (e.target === modal || e.target.classList.contains('close-modal') || e.target.classList.contains('fa-times')) {
                    document.body.removeChild(modal);
                }
            });
        }

        // 显示更多文档
        function showMoreDocuments() {
            alert('查看全部文档功能开发中...');
        }

        // 显示更多网页
        function showMoreWebpages() {
            alert('查看全部文章功能开发中...');
        }

        // 反馈功能
        function toggleFeedback(button, type) {
            const parent = button.parentElement;
            const buttons = parent.querySelectorAll('.feedback-btn');
            
            if (type === 'like' || type === 'dislike') {
                buttons.forEach(btn => {
                    if ((type === 'like' && btn !== button) || (type === 'dislike' && btn !== button)) {
                        btn.classList.remove('active');
                    }
                });
            }
            
            button.classList.toggle('active');
        }

        function showFeedbackDialog() {
            const feedback = prompt('请输入您的反馈建议：');
            if (feedback) {
                console.log('用户反馈：', feedback);
                alert('感谢您的反馈！');
            }
        }

        // 复制到剪贴板
        function copyToClipboard(button) {
            const codeBlock = button.closest('.result-panel').querySelector('pre');
            if (codeBlock) {
                navigator.clipboard.writeText(codeBlock.textContent).then(() => {
                    const originalIcon = button.innerHTML;
                    button.innerHTML = '<i class="fas fa-check text-green-500"></i>';
                    setTimeout(() => {
                        button.innerHTML = originalIcon;
                    }, 2000);
                });
            }
        }

        // Robot下拉选择功能
        const robotSelector = document.getElementById('robotSelector');
        if (robotSelector) {
            robotSelector.addEventListener('change', (e) => {
                const selectedRobot = e.target.value;
                console.log('选择的Robot:', selectedRobot);
                // 这里可以添加根据选择的Robot切换功能的逻辑
            });
        }

        // 确保所有事件监听器都正确绑定
        function initializeEventListeners() {
            console.log('正在初始化事件监听器...');
            
            // 重新绑定对话历史项目
            const conversationItems = document.querySelectorAll('.conversation-item');
            console.log('找到对话历史项目:', conversationItems.length);
            conversationItems.forEach(item => {
                item.removeEventListener('click', handleConversationClick);
                item.addEventListener('click', handleConversationClick);
                console.log('已绑定对话历史项目:', item.dataset.type);
            });

            // 重新绑定下载按钮
            const downloadBtns = document.querySelectorAll('.download-btn');
            console.log('找到下载按钮:', downloadBtns.length);
            downloadBtns.forEach(btn => {
                btn.removeEventListener('click', handleDownloadClick);
                btn.addEventListener('click', handleDownloadClick);
                console.log('已绑定下载按钮:', btn.dataset.conversation);
            });

            // 重新绑定删除按钮
            const deleteBtns = document.querySelectorAll('.conversation-item button:not(.download-btn)');
            deleteBtns.forEach(btn => {
                btn.removeEventListener('click', handleDeleteClick);
                btn.addEventListener('click', handleDeleteClick);
            });

            // 重新绑定处理节点
            setupProcessingNodes();
            
            console.log('事件监听器初始化完成');
        }

        // 对话历史点击处理函数
        function handleConversationClick(e) {
            console.log('对话历史项目被点击:', e.currentTarget.dataset.type);
            const type = e.currentTarget.dataset.type;
            
            // 移除所有对话历史项的高亮状态
            document.querySelectorAll('.conversation-item').forEach(item => {
                item.classList.remove('bg-indigo-50', 'border-l-4', 'border-indigo-500');
            });
            
            // 高亮当前选中的对话历史项
            e.currentTarget.classList.add('bg-indigo-50', 'border-l-4', 'border-indigo-500');
            
            // 加载对应的对话内容
            loadConversation(type);
        }

        // 删除按钮点击处理函数
        function handleDeleteClick(e) {
            e.stopPropagation();
            console.log('删除按钮被点击');
            const item = e.currentTarget.closest('.conversation-item');
            if (item) {
                item.style.transform = 'translateX(-100%)';
                item.style.opacity = '0';
                setTimeout(() => {
                    item.remove();
                }, 300);
            }
        }

        // 下载按钮点击处理函数
        function handleDownloadClick(e) {
            console.log('下载按钮被点击');
            e.stopPropagation();
            const conversationType = e.target.closest('.download-btn').dataset.conversation || 'conversation';
            console.log('下载对话类型:', conversationType);
            
            // 模拟下载功能
            const filename = `conversation_${conversationType}_${new Date().toISOString().split('T')[0]}.txt`;
            const content = `对话记录 - ${conversationType}\n时间: ${new Date().toLocaleString()}\n\n这里是${conversationType}类型的对话内容...`;
            
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // 初始化页面
        window.addEventListener('load', () => {
            console.log('页面开始加载...');
            
            // 初始化基本事件监听器
            initializeBasicEventListeners();
            
            // 初始化所有事件监听器（包括对话历史等）
            initializeEventListeners();
            
            // 初始化处理节点点击事件
            setupProcessingNodes();
            
            // 默认加载知识问答示例（第一个对话历史项）
            setTimeout(() => {
                loadKnowledgeConversation();
                
                // 高亮第一个对话历史项
                setTimeout(() => {
                    const firstConversationItem = document.querySelector('.conversation-item[data-type="knowledge"]');
                    if (firstConversationItem) {
                        firstConversationItem.classList.add('bg-indigo-50', 'border-l-4', 'border-indigo-500');
                        console.log('已高亮第一个对话历史项');
                    }
                }, 100);
            }, 200);
            
            // 检查关键元素是否存在
            console.log('检查关键元素:');
            console.log('- conversationSearch:', document.getElementById('conversationSearch'));
            console.log('- newConversationBtn:', document.getElementById('newConversationBtn'));
            console.log('- userDetailBtn:', document.getElementById('userDetailBtn'));
            console.log('- settingsBtn:', document.getElementById('settingsBtn'));
            
            console.log('页面加载完成');
        });
    </script>
</body>
</html>